Skip to content

Emojis are no longer appearing #475

@samettttt

Description

@samettttt

Hello,

I was updating emoji-picker-react from 4.13.3 to 4.15.1 but noticed a pretty big regression.

When opening the Emoji Picker, emojis are no longer appearing. This is a different issue from #469 as I cannot scroll within the emoji component.

I believe this is due to a sort of circular dependency between the category visibility detection and the emoji rendering but I am not entirely sure. Correct me if I'm wrong but here is what I think is happening:

  1. visibleCategoriesState initializes as an empty array (PickerContext.tsx, line 38)
  2. visibleCategories is also an empty array when reading from state (EmojiList.tsx, line 78)
  3. Emojis only render if their category is in visibleCategories (useEmojiVirtualization.tsx, lines 92-95)
  4. Without rendered emojis, categories have 0 height
  5. useActiveCategoryScrollDetection uses IntersectionObserver which cannot detect 0-height elements
  6. visibleCategories remains empty → Emojis never render

Not sure why this is happening in my case, because I cannot reproduce it locally on storybook. I've tried initializing visibleCategoriesState with an array containing all the categories which renders emojis but only the smileys_people category, other categories do not render.

For browsers, I've only tested if this issue happens on Firefox and Chrome and it did.
For operating systems, I've only tested if this issue happens on Windows 11 and MacOS and it did.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions