diff --git a/src/services/upper-bar-manager/ui/displayed-bar/displayed-bar.component.tsx b/src/services/upper-bar-manager/ui/displayed-bar/displayed-bar.component.tsx index f87003b..3e7b137 100644 --- a/src/services/upper-bar-manager/ui/displayed-bar/displayed-bar.component.tsx +++ b/src/services/upper-bar-manager/ui/displayed-bar/displayed-bar.component.tsx @@ -1,4 +1,4 @@ -import { h, Component, ComponentChild, RefObject } from 'preact'; +import { h, Component, ComponentChild, RefObject, createRef } from 'preact'; import { IconModel } from '../../models/icon-model'; import { IconWrapper } from '../icon-wrapper/icon-wrapper.component'; import * as styles from './displayed-bar.component.scss'; @@ -32,6 +32,7 @@ type PropsFromRedux = { // @ts-ignore @connect(mapStateToProps, null, null, { forwardRef: true }) export class DisplayedBar extends Component { + public moreIconRef = createRef(); constructor() { super(); this.state = { showDropdown: false }; @@ -109,6 +110,9 @@ export class DisplayedBar extends Component { + this.moreIconRef.current = node; + }} /> )} diff --git a/src/services/upper-bar-manager/upper-bar-manager.tsx b/src/services/upper-bar-manager/upper-bar-manager.tsx index fe57d03..5bdb63c 100644 --- a/src/services/upper-bar-manager/upper-bar-manager.tsx +++ b/src/services/upper-bar-manager/upper-bar-manager.tsx @@ -76,6 +76,11 @@ export class UpperBarManager { return icons.sort((a, b) => iconsOrder[a.displayName] - iconsOrder[b.displayName]); } + public getMorePluginButton() { + const moreElement = this.displayedBarComponentRefs.Playback.current?.moreIconRef?.current?.base as HTMLElement; + return moreElement?.querySelector('[tabindex="0"]') as HTMLButtonElement; + } + public focusPluginButton(pluginId: number) { let pluginButton; const controls = this.getControls(this.iconsOrder); @@ -83,9 +88,7 @@ export class UpperBarManager { if (pluginElement) { pluginButton = pluginElement.querySelector('[tabindex="0"]') as HTMLElement; } else { - const rightControls = this.displayedBarComponentRefs.Playback.current?.base as HTMLElement; - const buttons = rightControls.querySelectorAll('[tabindex="0"]'); - pluginButton = buttons[buttons.length - 1] as HTMLElement; + pluginButton = this.getMorePluginButton(); } pluginButton?.focus(); }