search

ealush / emoji-picker-react

The most popular React Emoji Picker
https://ealush.com/emoji-picker-react/
MIT License
1.1k stars 177 forks source link

Passing a prop to enable/disable autofocus on searchbar? #150

Closed vanbasten17 closed 4 years ago

vanbasten17 commented 4 years ago

Hi! I was recently trying the latest version 3.1.6 of the emoji picker and the searchbar has the autofocus enabled by default. IMHO, this should be up to the developer as in some scenarios, e.g., Safari iPhone, the autofocus is handled by auto-zooming in if the font-size is below a specific threshold (I think if lower than 16px). I suggest to have a prop "autofocus" to be set to true or false in order to have more flexibility (maybe it would be interesting to have also a prop for font-sizes, or to enable/disable the search bar).

By the way, is there any workaround at this moment to disable the autofocus on searchbar?

Thanks in advance!

ealush commented 4 years ago

Hey, good point. Didn't think about mobile safari (in general I do not recommend using this package in mobile browsers since they already have an emoji keyboard built in).

Either way, the easiest way for you to overcome this would be to upgrade to 3.1.7 and use the disableAutoFocus boolean prop.

The reason I am using the negative form disableAutoFocus instead of autoFocus is that the latter would be a breaking change and change the already existing behavior.

Hope this helps!

vanbasten17 commented 4 years ago

Hi @ealush ! Thanks for the quick response! I tried the new version and it works as expected 💯
Just to let you know, I think you are missing the definition in emoji-picker-react.d.ts. By the way, have you considered to be able to change the font-size also? This was related with the issues with Safari browsers and will be very helpful to have a complete solution. Thanks again and good work with this library! 😄

ealush commented 4 years ago

@vanbasten17 regarding the font size, I prefer not to do this, and I believe that in your case you should make that change locally in css. I try not to make any assumption regarding your device and the context you're running in. Does that make any sense?