Skip to content
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

Support selecting with tab on searchable multiselects #1432

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

miffens
Copy link

@miffens miffens commented May 14, 2021

Refresh of #654 which had merge conflicts with the latest master.
Includes fresh run of npm run bundle

Versioning

Confirmed that fix aligns with the behavior in the current state of the unreleased v3 (https://github.com/shentao/vue-multiselect/tree/v3)

  • Sidenote: One minor inconsistency I noticed in v3 is that if you tab out and shift+tab to re-focus on the multiselect, the previously entered text content is still there instead of resetting. Don't know if this is intentional or a bug.

If bug fixes/ maintenance aren't desired for the currently released v2 and all efforts are focused on releasing v3, it's okay to close this PR. Figured I'd submit one anyway as I have done the work already for my company.

Demo

Before, if a user types some text and presses tab, it will clear the text and move to the next focusable item:
Before - cannot create new on tab
After: the inputted text will become a new selected option:
after - create new tag on tab

Before, if a user keys up/down and presses tab, a selection will not occur:
Before - cannot select on tab
After: navigating the dropdown, then pressing tab, will select the currently focused option
As before, deselecting will not be triggered by tab
after - select existing option on tab

Note: "keyboard buffer" links were temporary code for this demo and aren't in final changes

Code changes

  • Trigger option selection logic on pressing tab
  • Always set pointerDirty to true when filteredOptions updates (ie when user types search query), even if pointer is still 0. An example where pointer=0/ pointerDirty=true occurs is when the user is entering a new tag that does not match any existing options. This change affects the following in select():
if (key === 'Tab' && !this.pointerDirty) return
  • ^ This code handles an early exit (don't select anything). If pointerDirty = true, the code proceeds into the main selection logic, so the new option is added.

Possible impact of change on other behavior

  • The change only affects tab behavior on searchable multiselects:
        <input
          ref="search"
          v-if="searchable"
  • Stepped through code and verified that pointerDirty works as expected in select(). pointerDirty only affects behavior if the key pressed was "tab"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants