Downshift: [useSelect] Pressing spacebar should select the option

[lukyth]

• downshift version: 3.4.7
• node version: 12.13.0
• npm (or yarn) version: 1.19.2

Relevant code or config

function DropdownSelect() {
  const {
    isOpen,
    selectedItem,
    getToggleButtonProps,
    getLabelProps,
    getMenuProps,
    highlightedIndex,
    getItemProps,
  } = useSelect({items})
  return (
    <div>
      <label {...getLabelProps()}>Choose an element:</label>
      <button {...getToggleButtonProps()}>{selectedItem || 'Elements'}</button>
      <ul {...getMenuProps()} style={menuStyles}>
        {isOpen &&
          items.map((option, index) => (
            <li
              style={
                highlightedIndex === index ? {backgroundColor: '#bde4ff'} : {}
              }
              key={`${option}${index}`}
              {...getItemProps({item: option, index})}
            >
              {option}
            </li>
          ))}
      </ul>
    </div>
  )
}

What you did:

Use useSelect similar to the example provided by the repository.

What happened:

When I open a menu and use arrow key to focus on an option, pressing space won't select it but will scroll the menu.

Reproduction repository:

https://codesandbox.io/s/53qfj

Problem description:

When I open a menu and use arrow key to focus on an option, pressing space won't select it but will scroll the menu.

Suggested solution:

Pressing spacebar should select the option.

[silviuaavram]

Thanks for pointing this out! Indeed, a native <select> has this feature? Can you create a PR for it? It should be similar to how Enter on menu is implemented. If you have questions please feel free to ask.

[lukyth]

Yes <select> does allow a user to press spacebar to select an option. Let me take a stab at this! 😄

[silviuaavram]

:tada: This issue has been resolved in version 4.0.2 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: