Issue #1689, change selectize behavior to work inside modals. #1813
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
vanboom
commented
Jun 6, 2022
| $dropdown.on('mouseenter', '[data-selectable]', function() { return self.onOptionHover.apply(self, arguments); }); | ||
| $dropdown.on('mousedown click', '[data-selectable]', function() { return self.onOptionSelect.apply(self, arguments); }); | ||
| watchChildEvent($control, 'mousedown', '*:not(input)', function() { return self.onItemSelect.apply(self, arguments); }); | ||
| $dropdown.on('mouseup click', '[data-selectable]', function() { return self.onOptionSelect.apply(self, arguments); }); |
There was a problem hiding this comment.
Native selects change on the mouse-up. Selectize should match this behavior.
vanboom
commented
Jun 6, 2022
| @@ -231,7 +231,8 @@ $.extend(Selectize.prototype, { | |||
| return false; | |||
| } | |||
| // blur on click outside | |||
| if (!self.$control.has(e.target).length && e.target !== self.$control[0]) { | |||
There was a problem hiding this comment.
$control will never have e.target here, as e.target is contained within $dropdown. This appears to be a logic error. When clicking inside of the dropdown we do not want to blur, so $dropdown.has(e.target) is the correct logic here.
| @@ -231,7 +231,8 @@ $.extend(Selectize.prototype, { | |||
| return false; | |||
| } | |||
| // blur on click outside | |||
| if (!self.$control.has(e.target).length && e.target !== self.$control[0]) { | |||
| // do not blur if the dropdown is clicked | |||
| if (!self.$dropdown.has(e.target).length && e.target !== self.$control[0]) { | |||
There was a problem hiding this comment.
e.target is always contained within self.$dropdown here. $dropdown and $control are sibling elements in the DOM. $dropdown is the correct element to use for this logic.
| } | ||
| // Bug fix do not blur dropdown here |
There was a problem hiding this comment.
This code causes the drop down to flash open then closed when a click is detected outside of the control. Let's remove it - nobody uses IE11 any more.
risadams
approved these changes
Sep 16, 2022
meldafert
added a commit
to meldafert/selectize.js
that referenced
this pull request
Dec 1, 2022
Fixes selectize#1926. To be accessible, it should be possible to easily navigate elements using the keyboard. Previously, when using TAB to navigate through form elements, the input would enter its focused state when focused with TAB (and the dropdown would open when using `openOnFocus`). However, when TAB is used to jump to the next focusable element, it would not lose its focused state, and the dropdown would stay open. This commit restores the behavior before selectize#1813 and ensures that the input leaves its focused state and closes the dropdown when blurred using TAB.
meldafert
added a commit
to meldafert/selectize.js
that referenced
this pull request
Dec 1, 2022
Fixes selectize#1926. To be accessible, it should be possible to easily navigate elements using the keyboard. Previously, when using TAB to navigate through form elements, the input would enter its focused state when focused with TAB (and the dropdown would open when using `openOnFocus`). However, when TAB is used to jump to the next focusable element, it would not lose its focused state, and the dropdown would stay open. This commit restores the behavior before selectize#1813 and ensures that the input leaves its focused state and closes the dropdown when blurred using TAB.
meldafert
added a commit
to meldafert/selectize.js
that referenced
this pull request
Dec 1, 2022
Fixes selectize#1926. To be accessible, it should be possible to easily navigate elements using the keyboard. Previously, when using TAB to navigate through form elements, the input would enter its focused state when focused with TAB (and the dropdown would open when using `openOnFocus`). However, when TAB is used to jump to the next focusable element, it would not lose its focused state, and the dropdown would stay open. This commit restores the behavior before selectize#1813 and ensures that the input leaves its focused state and closes the dropdown when blurred using TAB.
meldafert
added a commit
to meldafert/selectize.js
that referenced
this pull request
Dec 1, 2022
Fixes selectize#1926. To be accessible, it should be possible to easily navigate elements using the keyboard. Previously, when using TAB to navigate through form elements, the input would enter its focused state when focused with TAB (and the dropdown would open when using `openOnFocus`). However, when TAB is used to jump to the next focusable element, it would not lose its focused state, and the dropdown would stay open. This commit restores the behavior before selectize#1813 and ensures that the input leaves its focused state and closes the dropdown when blurred using TAB. This commit also fixes some tests to ensure they are self-contained.
risadams
pushed a commit
that referenced
this pull request
Dec 2, 2022
Fixes #1926. To be accessible, it should be possible to easily navigate elements using the keyboard. Previously, when using TAB to navigate through form elements, the input would enter its focused state when focused with TAB (and the dropdown would open when using `openOnFocus`). However, when TAB is used to jump to the next focusable element, it would not lose its focused state, and the dropdown would stay open. This commit restores the behavior before #1813 and ensures that the input leaves its focused state and closes the dropdown when blurred using TAB. This commit also fixes some tests to ensure they are self-contained.
risadams
added a commit
that referenced
this pull request
Dec 6, 2022
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Thank you for selectize.js! I am pleased to contribute this PR for your consideration.
The root cause of issue #1689 is that the drop down is being closed on the
mousedownaction, leaving themouseup/clickevent to happen outside of the control. That causes theblurevent which closes any modal that the selectize resides within.A standard HTML select control changes when the
mouseupaction is received. This PR emulates that same behavior by making the selection change when themouseupis detected.A logic error was also discovered where it appears that the author is attempting not to blur the control if the user clicks on a dropdown item. See the code comments for discussion on this.
Finally, IE11 should no longer be supported, so a few lines were removed that were causing further issues with the drop down flashing open then closed when a click was performed outside of the control.
Thank you for your consideration. I have tested this thoroughly on Chrome, Firefox, Safari on Windows, Linux and various tablet/mobile devices and it appears to be a significant improvement to the behavior of the control.