diff --git a/webapp/src/editortoolbar.tsx b/webapp/src/editortoolbar.tsx index c68bcc90c58c..909a045c575c 100644 --- a/webapp/src/editortoolbar.tsx +++ b/webapp/src/editortoolbar.tsx @@ -25,7 +25,8 @@ interface EditorToolbarState { export class EditorToolbar extends data.Component { protected compileTimeout: number; - private compileBtnDropdown: React.RefObject; + private computerCompileBtn: React.RefObject; + private mobileCompileBtn: React.RefObject; constructor(props: ISettingsProps) { super(props); @@ -42,7 +43,8 @@ export class EditorToolbar extends data.Component { + protected onFileDownloadClick = async (returnFocusCallback: () => void) => { // Matching the tick in the call to compile() above for historical reasons pxt.tickEvent("editortools.download", { collapsed: this.getCollapsedState() }, { interactiveConsent: true }); pxt.tickEvent("editortools.downloadasfile", { collapsed: this.getCollapsedState() }, { interactiveConsent: true }); - (this.props.parent as ProjectView).compile(true); + await (this.props.parent as ProjectView).compile(true); + returnFocusCallback(); } - protected onPairClick = () => { + protected onPairClick = async (returnFocusCallback: () => void) => { pxt.tickEvent("editortools.pair", undefined, { interactiveConsent: true }); - this.props.parent.pairAsync(); + await this.props.parent.pairAsync(); + returnFocusCallback(); } protected onCannotPairClick = async () => { @@ -247,8 +251,9 @@ export class EditorToolbar extends data.Component { - cmds.showDisconnectAsync(); + protected onDisconnectClick = async (returnFocusCallback: () => void) => { + await cmds.showDisconnectAsync(); + returnFocusCallback() } protected onHelpClick = () => { @@ -349,17 +354,22 @@ export class EditorToolbar extends data.Component view === View.Computer ? this.computerCompileBtn : this.mobileCompileBtn; + const returnFocus = () => { + const ref = getMenuRef(); + (ref.current.refs.dropdown as HTMLElement).focus(); + } // Add the ... menu const usbIcon = pxt.appTarget.appTheme.downloadDialogTheme?.deviceIcon || "usb"; el.push( - this.forceUpdate() // force update to refresh extMenuItems }> - {webUSBSupported && !packetioConnected && } + {webUSBSupported && !packetioConnected && this.onPairClick(returnFocus)} />} {showUsbNotSupportedHint && } - {webUSBSupported && (packetioConnecting || packetioConnected) && } + {webUSBSupported && (packetioConnecting || packetioConnected) && this.onDisconnectClick(returnFocus)} />} {boards && } - {!extMenuItems?.length && } + {!extMenuItems?.length && this.onFileDownloadClick(returnFocus)} />} {extMenuItems.map((props, index) => )} {downloadHelp && }