Customize whether to autoSelect first option on dropdown?

[cheahkhing]

Hi, after I use "tab to select" in the SimpleSelect / MultiSelect, i noticed one undesirable effect. It happens when you trying to tab through a form with multiple React-Selectize controls. When you're on a control with pre-set value, it will auto highlight current selected value, and hence your "tab" key will actually still works fine. But when you're "tabbing" into an empty Selectize control with a list of options, due to the default behaviour it auto highlight the 1st option, so "tab" will actually keep selecting the elements in the list, until it is all selected then only it will close and "move" to the next control. So, do you think it will be possible to customize "Don't auto select first option for me" when i am on an empty selectize control?

[furqanZafar]

fixed in version 0.8.3

      firstOptionIndexToHighlight = {(optionIndex, options, value, search) => {
        return (optionIndex == 0 && search.length == 0) ? -1 : optionIndex
      }}

http://codepen.io/furqanZafar/pen/PNqoOY?editors=0010

[cheahkhing]

hi, this is indeed a good enhancement! :)

However, it doesn't work in the case of "cancelKeyboardEventOnSelection" is true. By right, when "cancelKeyboardEventOnSelection" is true, and the control is "MultiSelect", when you focus on it, and there's no highlight shown, you should be able to press "tab" to move on to the next control. This behaviour is not working though. :(

Basically on MultiSelect, it is a bit weird if you didn't highlight anything, and it just prevent you from tabbing away.

And, if you notice on your example, after you select the first option, when you focus back, it doesn't auto highlight the selected option?

[furqanZafar]

However, it doesn't work in the case of "cancelKeyboardEventOnSelection" is true.

if you are using tab as a delimiter then you should set cancelKeyboardEventOnSelection to false, so that the default behaviour of tab (changing focus) is not blocked by selecting a value. see (https://github.com/furqanZafar/react-selectize/issues/42)

And, if you notice on your example, after you select the first option, when you focus back, it doesn't auto highlight the selected option?

I updated the pen to fix this, by selecting the computed index if the value is defined http://codepen.io/furqanZafar/pen/PNqoOY

[cheahkhing]

Hi, the reason i mentioned it doesn't work for use "tab" to select case, is because I need both the feature of "tab" to select and "cancelKeyboardEventOnSelection" to true. Imagine in the case of MultiSelect, every "tab" is actually a select action, so the dropdown should stays open until every items being selected / user explicitly press "esc" to dismiss dropdown. For this enhancement, I'll lose this behaviour because it didn't check whether there is highlight or not. It should auto move the "focus" if there is no highlight, isn't it? or I'll need to customize this by myself?

[furqanZafar]

should be fixed in release 0.8.4