Как мне остановить Office Fabric Dropdown от выбора первого элемента в фокусе? - PullRequest
Новая
       39

Как мне остановить Office Fabric Dropdown от выбора первого элемента в фокусе?

0 голосов
/ 10 апреля 2019

Я использую выпадающий список из Office Fabric в React. У меня есть много выпадающих списков, которые я с радостью выберу первый элемент по умолчанию, но у меня есть некоторые, которые я не хочу этого поведения. Когда я ставлю точку останова в отладчике, вызывается onDropdownChange(), когда я нажимаю на раскрывающийся список в первый раз.

Мне удалось отследить событие до Dropdown.base.js, где я вижу этот код, который, кажется, заставляет фокусироваться на первом элементе, если ни один не выбран: 

        _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()}
        />

Есть ли способ, которым я могу обойти это? Я вижу, что другие используют офисную структуру и не имеют такого поведения, например, VSO с их панелью параметров столбцов (что я создаю для своего собственного сайта), но я не вижу, что мне нужно делать, или если они каким-то образом обрабатываются пользователем Это. Единственная идея, которую я имею, заключается в том, чтобы поместить пустую запись в качестве опции, а затем предварительно выбрать ее. Мало того, что он выбирает первую запись, но когда я впервые щелкаю раскрывающееся меню со списком, он просто выбирает первую опцию и не раскрывает раскрывающийся список.

1 Ответ

0 голосов
/ 17 апреля 2019

Действительно, это поведение по умолчанию , для события focus выбирается первый доступный вариант раскрывающегося списка.Один из вариантов переопределить это поведение:

a) ввести параметр default 

 <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
   }
}

Вот демо 1016 *

...