Select item with tab

[tu4mo]

• downshift version: 6.1.7

Problem description:

According to aria-practices Listbox Popup should "Sets the value to the content of the focused option in the listbox" when pressing Tab. Currently useSelect does not select the item.

Suggested solution:

Select the item when pressing tab.

[OrionPro]

I support, I also faced the fact that I need to make a choice on TAB

[silviuaavram]

Will track the 1.2 behaviour update here #1365.

Meanwhile to work around, use stateReducer, capture useSelect.stateChangetypes.MenuBlur and if there is a highlightedIndex, return that item as selectedItem, thus the selection is performed.

[qwbarch]

Will track the 1.2 behaviour update here #1365.

Meanwhile to work around, use stateReducer, capture useSelect.stateChangetypes.MenuBlur and if there is a highlightedIndex, return that item as selectedItem, thus the selection is performed.

Is the tab change not out on 7.0.1 yet? It doesn't seem to work for me so I tried adding a state reducer with your suggestion:

  function stateReducer(
    state: DownshiftState<any>,
    changes: StateChangeOptions<any>
  ): StateChangeOptions<any> {
    switch (changes.type) {
      case Downshift.stateChangeTypes.blurInput:
        if (state.highlightedIndex != null) {
          return {
            ...changes,
            inputValue: state.selectedItem,
          };
        }
    }
    return changes;
  }

I'm guessing that blurInput is what MenuBlur used to be, since stateChangeTypes no longer contains that type.
This doesn't set the input to the selected item as expected though.
When debugging what the current state values are, it appears that state.selectedItem stays as null when using the arrow keys to move around.

Do you know what I'm doing wrong with my state reducer?

[silviuaavram]

In 7.0.1 useSelect you should be able to select by Tab if you have a highlighted item, without the need to add anything extra. @qwbarch

[jmfolds]

Is the tab select behaviour not the same for useMultipleSelection in v7?

[silviuaavram]

If you are referring to the useSelect usage, yes, now you can also select with Tab starting with v7.