onFocus is not exposed for overridden

[quockhanhle93]

Hi there,

We are currently using the react-dropdown-select in our project. Is it possible to override the onFocus Function of index.js line 486?

We would really appreciate to handle it by ourselves because we do not want the dropdown to open automatically on focus but will receive a :focus pseudoclass, or handle some styling. We just want to open the dropdown on pressing Enter on keyboard.

Thank you and best wishes
Khanh

[sanusart]

Hi @quockhanhle93,
Exposing onFocus will not be enough, there are way more triggers for opening the dropdown.

What you can do is to toggle the dropdown using handleKeyDownFn prop and react on Enter key.

For example: https://codesandbox.io/s/open-on-top-w1yr0

handleKeyDownFn signature is:handleKeyDownFn = ({ event, state, props, methods, setState }) => {};

[quockhanhle93]

Hi @sanusart,

That sounds great to use styled-components and handleKeyDownFn to toggle the dropdown as your example. It works for me, but it seems that the dropdown is still opened and onDropdownOpen Function is already triggered before pressing on Enter key.

Anyway, it is good so far. Thanks for your great helps.

[sanusart]

Hey yes I know. It is kind of triking the component visually only.
I just think it would be a bit of overkill to add drop-down open preventing mechanism. Specially when the whole point of the lib is drop-down.

We can see how your use case can be handled more properly. The example above is obviously a simple one.

[quockhanhle93]

Thanks @sanusart, let me open this discussion a little bit. :)

We try to improve current user experience. In fact, we have a form of more than 10 dropdowns, it is fine to click on each dropdown to open and choose from the list of options. However, we are encouraging users on using Tab (working with keyboard is much faster than mouse click) to switch and control the input. There are some issues:

• The dropdown is opened automatically on focus. For some reasons, user just wants to tab and pass over this dropdown, but it is now opened. User has to close it before moving to the next element.
• Your example is useful, and can be considered as a workaround. But, we really want to provide a different stylesheet onDropdownOpen and onDropdownClose (just add/remove the element's classname).

We are looking around for finding a suitable dropdown, and realize that your repository is best fit to our need. It is appreciated to have this feature, not just for onFocus, but onClick or other props. I think it is not overkill, actually, it should have a default behavior, but can be opened for overriding. Applications which currently used react-dropdown-select are able to control the stylesheet, and provide the suitable experiences to their users.

Thanks a lot.

[sanusart]

Hey @quockhanhle93
It sounds way more appropriate from your example. Yes. Definitely needed behaviour (especially that regular HTML select behaves like this with tab focus).

I'll look into how to make it happend, unfortunately did not took this kind of case into account with all possible triggers happening now, so it may take some time to re-factor.

Thanks for taking time to describe.

[quockhanhle93]

Thanks @sanusart for understanding our situation. Thanks for spending your time on helping me.
I will become one of your project contributors soon. :)

[sanusart]

@quockhanhle93 Any chance you can test in your setup using the branch in PR?

codesandbox autogenerates a temp package for each PR:
https://ci.codesandbox.io/status/sanusart/react-dropdown-select/pr/90/builds/23291

[sanusart]

Should be available since v4.4.0

[quockhanhle93]

Thanks a lot @sanusart It sounds a great help. Thanks.