React で Office Fabric の Dropdown を使用しています。デフォルトで最初の要素を選択できるドロップダウンがたくさんありますが、この動作を望まないものもあります。デバッガーにブレークポイントを配置する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 (これは私が自分のサイト用に構築しているものです) など、この動作をしていませんが、何をする必要があるか、または何らかの方法でカスタム処理されているかどうかはわかりません。それ。オプションとして空白のエントリを配置し、それを事前に選択することに関して、私がこれまでに持っている唯一のアイデア。最初のエントリを選択するだけでなく、コンボボックスのドロップダウンを初めてクリックすると、最初のオプションが選択されるだけで、ドロップダウンが開かれません。