Emojis are no longer appearing
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 https://github.com/ealush/emoji-picker-react/issues/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:
visibleCategoriesStateinitializes as an empty array (PickerContext.tsx, line 38)visibleCategoriesis also an empty array when reading from state (EmojiList.tsx, line 78)- Emojis only render if their category is in
visibleCategories(useEmojiVirtualization.tsx, lines 92-95) - Without rendered emojis, categories have 0 height
useActiveCategoryScrollDetectionuses IntersectionObserver which cannot detect 0-height elementsvisibleCategoriesremains 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.
oh damn. let me try something. will report back soon.
@samettttt ok I pushed another version. Not being able to reproduce it locally I am not sure if it did anything to improve this behavior I just went with a few "common sense" heuristics
Let me know if that did anything.
Version: 4.15.2
Thanks for having a look, sadly the issue still persists on 4.15.2. I'm working on other things right now so I could not further investigate but is there anything I can provide you so that we can come up with a fix?