Навигация по специальным возможностям React не работает для выбранного компонента - PullRequest
Новая
       3

Навигация по специальным возможностям React не работает для выбранного компонента

0 голосов
/ 28 мая 2020

Я пытаюсь создать поддержку навигации с помощью клавиатуры для пользовательского компонента Select, созданного с использованием материала UI MenuItem. Я могу go через MenuItems, когда открываю Select, но параметры не могут быть выбраны, когда я нажимаю Enter или пробел на клавиатуре.

Parent Component 

class CustomSelect extends Component {
  render() {
    return (
      <Select
        value={carrots}
        open={menuOpen}
        name="impactValue"
        fullWidth
        onOpen={this.handleOpen}
        onClose={this.handleClose}
        input={
          <Input
            classes={{
              underline: classes.underline,
            }}
            name="impactValue"
            id="impactValue"
          />
        }
      >
        {filteredOptions.map((option) => (
          <SelectOption
            option={option.label}
            impact={option.value}
            defaultValue={option.goldLimit}
            canGivePoints={canGivePoints}
            availablePointsToGive={maxPointsToGive}
            onValueChange={this.onImpactSelected}
            onSubSelectToggle={this.onSubSelectToggle}
            key={option.label}
            customCompanyIcon={customCompanyIcon}
            customCurrency={customCurrency}
            selectedUsers={this.props.selectedUsers}
            tabIndex={0}
            role="list"
          >
            {option.label}
          </SelectOption>
        ))}
      </Select>
    );
  }
}

Select Option MenuItem ( Meterial UI MenuItem ) 

class ImpactSelectorItem extends Component {
  onOptionSelect = () => {
    const {
      impact,
      onValueChange,
      defaultValue,
      availablePointsToGive,
    } = this.props;
    let carrotAmount = defaultValue;
    if (defaultValue > availablePointsToGive) {
      carrotAmount = availablePointsToGive;
    }
    onValueChange(impact, carrotAmount);
  };
  render() {
    return (
      <MenuItem
        className={classes.MenuItem}
        key={impact}
        value={impact}
        {...rest}
      >
        <div className={classes.menuDiv} onClick={this.onOptionSelect}>
          {option}
        </div>
      </MenuItem>
    );
  }
}

PS: Если мы выберем каждый вариант с помощью мыши, он будет работать должным образом .

...