emoji-mart
emoji-mart copied to clipboard
Unable to display more than one custom category icon
When configuring 2 or more custom categories, only the icon of the first one is displayed.
I tested multiple different configurations defining order, or without ordering the result is always the same, only the icon of the first category is displayed.
Observing the objects, it is possible to notice that all the other categories (those whose icon is not displayed) receive an additional target property that references the first category.
Category name and emojis are displayed in the list, but the category icon is not.
Categories icons:
categoryIcons: {
one: {
src: "https://acaibot.site/img/acai-small-r.png"
},
two: {
src: "https://acaibot.site/img/acai-small.png"
}
}
What is displayed:
Am I missing something or is this the expected behavior?
Here's a minimal example: https://codesandbox.io/s/serene-mclaren-j51g0i?file=/index.html
After a look at the source code, I believe the problem is with the config.ts
file.
Because this conditional checks if the category has an icon (line 110):
if (prevCategory && !category.icon) {
category.target = prevCategory.target || prevCategory
}
Which is only initialized later on (line 164):
const { categoryIcons } = props
if (categoryIcons) {
const icon = categoryIcons[category.id]
if (icon && !category.icon) {
category.icon = icon
}
}
any updates on this?