missive / emoji-mart

🏪 One component to pick them all
https://missiveapp.com/open/emoji-mart
MIT License
8.38k stars 802 forks source link

Unable to display more than one custom category icon #793

Open jocafamaka opened 1 year ago

jocafamaka commented 1 year ago

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 commented 1 year ago

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
  }
}
ghost commented 1 year ago

any updates on this?