javascript - 禁用在按 Tab 键切换到下一个元素时选择语义 UI 下拉选项

Question

我正在使用 ReactJS 并使用 Semantic UI。

我的页面上有一个面包屑样式的导航菜单，是使用 Semantic UI 中的“面包屑”和“下拉”组件构建的。

我试图通过允许用户使用键盘(选项卡、箭头和 Enter)来导航菜单、下拉选项并从下拉选项中进行选择，从而使菜单的行为变得可访问。

我试图解决的问题是使用键盘时，用户应该只能在聚焦时选择一个选项(使用箭头键)然后按“回车”键 。当用户聚焦于某个选项时，当他们“tab”到下一个元素时，该选项就会被选中。

是否可以更改此行为，以便仅在按下 Enter 键时选择选项？

我尝试在下拉组件上实现“selectOnNavigation={false}”，但这仍然会导致在“按 Tab 键”离开元素时选择该选项。

我还尝试操作事件处理程序 onBlur()，但在按 Tab 键时它仍然选择了该选项。

我的组件的代码:

import React from 'react';
import { connect } from 'react-redux';
import { Breadcrumb, Dropdown } from 'semantic-ui-react';
import PropTypes from 'prop-types';
import {
  saveBreadcrumbOptions,
  changeBreadcrumbMarket,
  changeBreadcrumbParentGroup,
  changeBreadcrumbAgency
} from '../../actions/breadcrumbActions';
import MenuFiltersAPI from '../../api/MenuFiltersAPI';
import './OMGBreadcrumb.css';

export class OMGBreadcrumb extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      markets: [],
      parentGroups: [],
      agencies: []
    };

    this.getBreadcrumbOptions = this.getBreadcrumbOptions.bind(this);
    this.handleMarketChange = this.handleMarketChange.bind(this);
    this.handleParentGroupChange = this.handleParentGroupChange.bind(this);
    this.handleAgencyChange = this.handleAgencyChange.bind(this);
    this.handleParentGroupBlur = this.handleParentGroupBlur.bind(this);
  }

  componentDidMount() {
    this.getBreadcrumbOptions();
  }

  async getBreadcrumbOptions() {
    // get all options
    const breadcrumb = this.props.breadcrumb.options.length
      ? this.props.breadcrumb.options
      : await MenuFiltersAPI.getBreadcrumb();

    // if a market is selected, use it
    // otherwise use the first one
    let selectedMarket = breadcrumb.find(m => (
      m.id === this.props.breadcrumb.selectedMarket
    ));

    selectedMarket = selectedMarket
      ? selectedMarket.id
      : breadcrumb[0].id;

    this.props.saveBreadcrumbOptions(breadcrumb);
    this.setState({ markets: breadcrumb }, () => this.changeMarket(selectedMarket));
  }

  changeMarket(id) {
    // get parent group options for given market
    const parentGroups = this.state.markets.find(market => market.id === id).parent_groups;

    // if a parent group is selected, use it
    // otherwise use the first one
    let selectedParentGroup = parentGroups.find(pg => (
      pg.id === this.props.breadcrumb.selectedParentGroup
    ));

    selectedParentGroup = selectedParentGroup
      ? selectedParentGroup.id
      : parentGroups[0].id;

    this.props.changeBreadcrumbMarket(id);
    this.setState({ parentGroups }, () => this.changeParentGroup(selectedParentGroup));
  }

  changeParentGroup(id) {
    // get agency options for dropdown menu
    const agencies = this.state.parentGroups.find(parentGroup => parentGroup.id === id).agencies;

    let selectedAgency = agencies.find(a => (
      a.id === this.props.breadcrumb.selectedAgency
    ));

    selectedAgency = selectedAgency
      ? selectedAgency.id
      : agencies[0].id;

    this.props.changeBreadcrumbParentGroup(id);
    this.setState({ agencies }, () => this.changeAgency(selectedAgency));
  }

  changeAgency(id) {
    // const selectedAgency = agencyOptions[0].value
    this.props.changeBreadcrumbAgency(id);
  }

  handleMarketChange(e, { value }) {
    console.log(value)
    this.changeMarket(value);
  }

  handleParentGroupChange(e, { value }) {
    console.log(value)
    // if(!!value){
    //   return;
    // }
    this.changeParentGroup(value);
  }

  handleAgencyChange(e, { value }) {
    console.log(value)
    this.changeAgency(value);
  }

  handleParentGroupBlur(e, {value}) {
    e.preventDefault();
    console.log(e.key)
    if(e.key !== 'Enter'){
      console.log('key was not enter')
      return;
    }
    
  }

  render() {
    return (
      <div id="OMGBreadcrumb">
        <b>Show information by: </b>
        <Breadcrumb>
          <Breadcrumb.Section>
            <Dropdown
              selectOnNavigation={false}
              options={this.state.markets.reduce((acc, cur) => {
                acc.push({ text: cur.name, value: cur.id });
                return acc;
              }, [])}
              value={this.props.breadcrumb.selectedMarket}
              onChange={this.handleMarketChange}
              openOnFocus={false}
            />
          </Breadcrumb.Section>

          <Breadcrumb.Divider icon='right chevron' />

          <Breadcrumb.Section>
            <Dropdown
              selectOnNavigation={false}
              options={this.state.parentGroups.reduce((acc, cur) => {
                acc.push({ text: cur.name, value: cur.id });
                return acc;
              }, [])}
              value={this.props.breadcrumb.selectedParentGroup}
              onChange={this.handleParentGroupChange}
              openOnFocus={false}   
              onBlur={this.handleParentGroupBlur}         
            />
          </Breadcrumb.Section>

          <Breadcrumb.Divider icon='right chevron' />

          <Breadcrumb.Section>
            <Dropdown
              // selectOnNavigation={false}
              options={this.state.agencies.reduce((acc, cur) => {
                acc.push({ text: cur.name, value: cur.id });
                return acc;
              }, [])}
              value={this.props.breadcrumb.selectedAgency}
              onChange={this.handleAgencyChange}
              openOnFocus={false}
            />
          </Breadcrumb.Section>
        </Breadcrumb>
      </div>
    );
  }
}

OMGBreadcrumb.propTypes = {
  saveBreadcrumbOptions: PropTypes.func.isRequired,
  changeBreadcrumbMarket: PropTypes.func.isRequired,
  changeBreadcrumbParentGroup: PropTypes.func.isRequired,
  changeBreadcrumbAgency: PropTypes.func.isRequired,
  breadcrumb: PropTypes.objectOf(
    PropTypes.oneOfType([
      PropTypes.number,
      PropTypes.array
    ])
  ).isRequired
};

export default connect(
  store => ({
    breadcrumb: store.breadcrumb
  }),
  {
    saveBreadcrumbOptions,
    changeBreadcrumbMarket,
    changeBreadcrumbParentGroup,
    changeBreadcrumbAgency
  }
)(OMGBreadcrumb);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

感谢任何指导。

Answer 1

您可以将 selectOnBlur={false} 添加到下拉组件中，当下拉菜单模糊时，它将不再选择。

<Dropdown
  ...
  selectOnBlur={false}
/>

https://codesandbox.io/s/semantic-ui-example-7qgcu?module=%2Fexample.js