emoji-mart icon indicating copy to clipboard operation
emoji-mart copied to clipboard

Unable to display more than one custom category icon

Open jocafamaka opened this issue 2 years ago • 3 comments

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: image

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

jocafamaka avatar Feb 05 '23 16:02 jocafamaka

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
  }
}

jocafamaka avatar Feb 05 '23 19:02 jocafamaka

any updates on this?

ghost avatar Jun 29 '23 02:06 ghost