-
Notifications
You must be signed in to change notification settings - Fork 37
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
STCOM-1366 - Selection aggressive 'required' validation. #2363
Conversation
…l onBlur via nullish
Quality Gate passedIssues Measures |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you for the helpful comments explaining what the problem is, how the solution works, and especially the details of why the solution is written as it is with setTimeout. It totally makes sense but is not obvious at first. ❤️
* implement internal onBlur handler for Selection * add highlightedIndex to renderOptions dependencies. conditionally call onBlur via nullish * remove commented code * selection - include closeMenu function in stateReducer
STCOM-1366
React Final Form and redux form validate values using an onblur event. This can cause unwanted validation messages in the UI if the control is shifting focus to its open options list, when the user hasn’t yet had a chance to select a value yet.
Approach
Using refs for the options list containing element and the control itself, check to see if focus is still within the bounds of the component. If it isn't, trigger the provided
onBlur
if any, and close the menu if necessary.Before: The control value is validated before any value has been selected, when the menu is opened.
After: Validation only occurs when the user
When the filter input is blurred naturally (tab key) the menu is closed and the
onBlur
handler is triggered.Additionally - I noticed issues with keyboard navigation of items in the list and updated dependencies on rendering functions accordingly.