如何阻止 Office Fabric Dropdown 选择第一个焦点元素？

Question

我在 React 中使用 Office Fabric 的下拉菜单。我有很多下拉菜单，我很高兴默认情况下 select 第一个元素，但我有一些我不希望这种行为。当我在调试器中放置一个断点时，当我第一次点击下拉菜单时 onDropdownChange() 被调用。

我能够将事件追溯到 Dropdown.base.js，在那里我看到这段代码，如果 none 被 selected，它似乎强制关注第一个元素：

        _this._onFocus = function (ev) {
            var _a = _this.state, isOpen = _a.isOpen, selectedIndices = _a.selectedIndices;
            var multiSelect = _this.props.multiSelect;
            var disabled = _this._isDisabled();
            if (!disabled) {
                if (!isOpen && selectedIndices.length === 0 && !multiSelect) {
                    // Per aria
                    _this._moveIndex(ev, 1, 0, -1);
                }
                if (_this.props.onFocus) {
                    _this.props.onFocus(ev);
                }
                _this.setState({ hasFocus: true });
            }
        };

这是我的下拉渲染代码：

        return <Dropdown
            selectedKey={selected}
            placeholder={placeholder}
            ariaLabel={this.props.ariaLabel || this.props.label}
            label={this.props.label}
            onChange={this.onDropdownChange}
            options={this.getDropdownOptions()}
        />

有什么办法可以解决这个问题吗？我看到其他人使用 office fabric 而没有这种行为，例如 VSO 及其 Columns Options 窗格（这是我为自己的网站构建的），但我看不到我需要做什么或者他们是否以某种方式自定义处理它。到目前为止，我唯一的想法是将一个空白条目作为一个选项，然后预先 select 它。不仅 select 是第一个条目，而且当我第一次单击组合框的下拉菜单时，它只是 select 的第一个选项，不会弹出打开下拉菜单。

Answer 1

确实，这是 默认行为 ，在 focus 事件中，第一个可用的下拉选项被选中。覆盖此行为的一个选项是：

a) 引入一个默认选项

 <Dropdown componentRef={this.dropdownRef}
      styles={dropDownStyles}
      onFocus={this.handleDrownDownFocus}
      options={[
        { key: "All", text: "", disabled: true },
        { key: "A", text: "Option A" },
        { key: "B", text: "Option B" }
      ]}
 />

b) 并强制它在 focus 事件

上被选中

private handleDrownDownFocus(ev: React.FormEvent<HTMLDivElement>) {
   const dropDown = this.dropdownRef.current;
   if(dropDown && !this.selectedDefault){
     dropDown.setSelectedIndex(ev,0);
     this.selectedDefault = true
   }
}

这是一个demo

如何阻止 Office Fabric Dropdown 选择第一个焦点元素？

How do I stop Office Fabric Dropdown from selecting first element on focus?

reactjs

office-ui-fabric

office-fabric