Skip to content

With selectOnTab set to true, tabbing through a select without inputting anything selects the first option #1243

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

Closed
drekembe opened this issue Feb 2, 2017 · 2 comments

Comments

@drekembe
Copy link

drekembe commented Feb 2, 2017

I did:

  • [x ] Search for if my issue has already been submitted
  • [x ] Make sure I'm reporting something precise that needs to be fixed
  • [x ] Give my issue a descriptive and concise title
  • [x ] Create a minimal working example on JsFiddle or Codepen
    (or gave a link to a demo on the Selectize docs)
  • [x ] Indicate precise steps to reproduce in numbers and the result,
    like below

Steps to reproduce:

  1. open the fiddle: https://jsfiddle.net/zc0bjqkx/
  2. focus on the first field
  3. keep pressing tab

Expected result:
Reaching the end of the fields without any options being selected.

Actual result:
The first option is always selected. In the last select, which is a multiple select, all of the options get selected.

Hey! I'm not 100% sure that this is a bug, but it is behavior I think should be fixed. The problem is if you have selectOnTab set to true, and you tab through a bunch of selects, the first option will be selected when I don't fill anything in and press tab. If I don't input anything and press tab, it should just move on to the next input without selecting anything. My use case is that I have clients that have big forms with lots of fields, but most of them are optional. They want to be able to quickly tab through the form, filling in only the inputs that they want.
selectize
https://jsfiddle.net/zc0bjqkx/

@rskaarup
Copy link

Easy fix:

selectize.js v0.12.2 (which currently is the only version with tab-functions that work - see #1164 and #1464). Change line 1593 in standalone version and line 957 in src version from:

if (self.settings.selectOnTab && self.isOpen && self.$activeOption) {

To:
if (self.settings.selectOnTab && self.isOpen && self.$activeOption && (self.lastValue !== '')) {

It's the line just below:
case KEY_TAB:

Then you can tab through new and already filled out selectizes without messing them up.

(in v0.12.6 code is the same, but line numbers are 1022 and 1658 for src and standalone version respectively.)

@risadams
Copy link
Contributor

risadams commented Dec 1, 2020

closing stale issues older than one year.
If this issue was closed in error please message the maintainers.
All issues must include a proper title, description, and examples.

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

No branches or pull requests

3 participants