diff options
Diffstat (limited to 'src/client/views/ContextMenu.tsx')
-rw-r--r-- | src/client/views/ContextMenu.tsx | 18 |
1 files changed, 16 insertions, 2 deletions
diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx index 8dcdd80e5..8c3c9df2e 100644 --- a/src/client/views/ContextMenu.tsx +++ b/src/client/views/ContextMenu.tsx @@ -183,11 +183,12 @@ export class ContextMenu extends ObservableReactComponent<{}> { @computed get menuItems() { if (!this._searchString) { - return this._items.map((item, ind) => <ContextMenuItem {...item} noexpand={this.itemsNeedSearch ? true : (item as any).noexpand} key={ind + item.description} closeMenu={this.closeMenu} />); + return this._items.map((item, ind) => <ContextMenuItem key={item.description + ind} {...item} noexpand={this.itemsNeedSearch ? true : (item as any).noexpand} closeMenu={this.closeMenu} />); } return this.filteredItems.map((value, index) => Array.isArray(value) ? ( <div + key={index + value.join(' -> ')} className="contextMenu-group" style={{ background: StrCast(SettingsManager.userVariantColor), @@ -204,7 +205,10 @@ export class ContextMenu extends ObservableReactComponent<{}> { return this._showSearch ? 1 : this._items.reduce((p, mi) => p + ((mi as any).noexpand ? 1 : (mi as any).subitems?.length || 1), 0) > 15; } + _searchRef = React.createRef<HTMLInputElement>(); // bcz: we shouldn't need this, since we set autoFocus on the <input> tag, but for some reason we do... + render() { + this.itemsNeedSearch && setTimeout(() => this._searchRef.current?.focus()); return ( <div className="contextMenu-cont" @@ -226,7 +230,17 @@ export class ContextMenu extends ObservableReactComponent<{}> { <span className="icon-background"> <FontAwesomeIcon icon="search" size="lg" /> </span> - <input style={{ color: 'black' }} className="contextMenu-item contextMenu-description search" type="text" placeholder="Filter Menu..." value={this._searchString} onKeyDown={this.onKeyDown} onChange={this.onChange} autoFocus /> + <input + ref={this._searchRef} + style={{ color: 'black' }} + className="contextMenu-item contextMenu-description search" + type="text" + placeholder="Filter Menu..." + value={this._searchString} + onKeyDown={this.onKeyDown} + onChange={this.onChange} + autoFocus + /> </span> )} {this.menuItems} |