CODEWITHSUNDEEP
reactjsselectaccessibilityblueprintjs
arunmmanoharan
arunmmanoharan

Reputation: 2675

Blueprintjs Select keyboard navigation not working - React

I have a blueprintjs select component and I was wondering how to enable keyboard navigation on the component. I followed their documentation but couldn't get a better understanding of it. Is it an issue with itemRendered modifier prop? Please advice.

Below is the link I have implemented using blueprintjs select:

Stackblitz

Any help is greatly appreciated.

Upvotes: 2

Views: 804

Answers (2)

Sonic Soul
Sonic Soul

Reputation: 24939

no need to implement onActiveItemChange

as per documentation here: https://blueprintjs.com/docs/#select/multi-select

example: https://github.com/palantir/blueprint/blob/develop/packages/docs-app/src/examples/select-examples/multiSelectExample.tsx

ensure your item renderer you set active={modifiers.active}:

 private renderFilm: ItemRenderer<IFilm> = (film, { modifiers, handleClick }) => {
        if (!modifiers.matchesPredicate) {
            return null;
        }
        return (
            <MenuItem
                active={modifiers.active}

Upvotes: 0

Kevin Raoofi
Kevin Raoofi

Reputation: 1033

You just need to wire up onActiveItemChange to update the value you're using for activeItem on the Select as so:

<CountrySelect
  items={countryCodes || []}
  onItemSelect={handleItemSelect}
  activeItem={selectedCountry}
  onActiveItemChange={setSelectedCountry}
  {...CountrySelectProps}
  noResults={<MenuItem disabled={true} text="No results." />}
>

Upvotes: 1

Related Questions