search

joeattardi / picmo

JavaScript emoji picker. Any app, any framework.
https://picmojs.com
MIT License
1.19k stars 116 forks source link

On the second click, the popup-picker stays at bottom of the container. #246

Closed DaniBedz closed 1 year ago

DaniBedz commented 2 years ago

I think I'm running into the same issue previously raised here: https://github.com/joeattardi/picmo/issues/217, that was closed by the reporter.

To recreate, set the showRecents: false picker option. When you open the picker the first time, it will display the 'smileys and emotions' category, at the top of the container. If you close and reopen the picker, the container's focus is at the bottom of the container, so you see the flags:

2022-09-29 12 37 05

Storybook also doesn't see to respect the value of the checkbox for this UI element, so I don't know if it can be reproduced in storybook alone at the moment: 2022-09-29 12 34 44

I tried to set the initialEmoji and initialCategory, to the first emoji, but that didn't resolve the issue.

Just let me know if you need any more info.

Thanks for the great project!

joeattardi commented 2 years ago

I just released 5.7.1 which should resolve this issue!

DaniBedz commented 2 years ago

Uh oh, looks like it's still happening on 5.7.1 if showRecents: false is set.

joeattardi commented 2 years ago

Reopening for now. I fixed the Storybook demo, so it now respects the flags in the popup picker. I can't seem to reproduce the behavior now - can you maybe put together a codepen or similar showing the issue? Maybe I am missing a scenario.

joeattardi commented 2 years ago

@DaniBedz Can you provide a reproducible example?

tuannm151 commented 1 year ago

I had the same issue when using css display: none to toggle the visibility for the picker. ezgif com-gif-maker (1)

joeattardi commented 1 year ago

@tuannm151 I can't tell for sure from your GIF but it looks like this is the core picker package, is that right? I haven't been able to reproduce this - I loaded it in https://picmojs.com/storybook/, selected the picker element, and toggled display: none as you have shown here - the scroll position did not change.

Can you provide a quick codepen or similar example showing the problem and let me know the browser you're using? Thanks.

joeattardi commented 1 year ago

@tuannm151 Just following up with you, if you can create an example showcasing the issue I'd be happy to look into it deeper

dEEpProjects commented 1 year ago

@tuannm151 I can't tell for sure from your GIF but it looks like this is the core picker package, is that right? I haven't been able to reproduce this - I loaded it in https://picmojs.com/storybook/, selected the picker element, and toggled display: none as you have shown here - the scroll position did not change.

Can you provide a quick codepen or similar example showing the problem and let me know the browser you're using? Thanks.

I have the same issue and I can reproduce it in the storybook when the recents category is selected. On my project, instead, it happens with any category.

joeattardi commented 1 year ago

I can reproduce this now with the base (non-popup) picker. If I scroll up to select the recents category, and I apply display: none to the picker then remove it, it jumps to the last category. Or, if I disable the recents category, it happens with the first category.

Is this what you are referring to? Based on the description and GIFs above, it seems to be. I will take a look.

joeattardi commented 1 year ago

Finally found the cause for this! I think I have a proper fix, will hopefully have a new release out this week to address this.

Thanks for the additional details.

joeattardi commented 1 year ago

Just published a new release, 5.7.3, that should resolve this issue. Please let me know or reopen if you still have issues!