fix: opening folder-menu clicking popup button, left the button visible after closing the menu

Massimo Melina committed Aug 17, 2024 at 18:47 UTC 0bca5f4f9d7768f8710337f62e9b808a6a4f1dd0
2 files changed +5 -3
frontend/src/fileMenu.ts
+1
@@ -94,6 +94,7 @@ export function openFileMenu(entry: DirEntry, ev: MouseEvent, addToMenu: (FileMe
94 icon: () => ico,
95 position: Math.min(innerWidth, innerHeight) < 800 ? undefined
96 : [ev.pageX, ev.pageY - scrollY] as [number, number],
97 + restoreFocus: ev.screenY || ev.screenX ? false : undefined,
98 Content() {
99 const {t} = useI18N()
100 const details = useApi('get_file_details', { uris: [entry.uri] }).data?.details?.[0]
shared/dialogs.ts
+4 -3
@@ -23,12 +23,12 @@ export interface DialogOptions {
23 $id?: number
24 $opening?: NodeJS.Timeout
25 ts?: number
26 + restoreFocus?: any
27
28 Container?: FunctionComponent<DialogOptions>
29 }
30
31 const dialogs = proxy<DialogOptions[]>([])
31 -const focusBak: (Element | null)[] = []
32 const { history } = window
33
34 export const dialogsDefaults: Partial<DialogOptions> = {
@@ -184,7 +184,8 @@ export function newDialog(options: DialogOptions) {
184 const ts = performance.now()
185 options.$id = $id // object identity is not working because of the proxy. This is a possible workaround
186 options.ts = ts
187 - focusBak.push(document.activeElement) // saving this inside options object doesn't work (didn't dig enough to say why)
187 + if (document.activeElement)
188 + options.restoreFocus ??= ref(document.activeElement)
189 options = objSameKeys(options, x => isValidElement(x) ? ref(x) : x) as typeof options // encapsulate elements as react will try to write, but valtio makes them readonly
190 options.$opening = setTimeout(() => { // in case dialogs were just closed, account for window.history delay. This should be harmless as ux is unaffected, and programmatically you already didn't expect this to happen immediately but at state change
191 dialogs.push(options)
@@ -223,7 +224,7 @@ export function closeDialog(v?:any, skipHistory=false) {
224
225 function closeDialogAt(i: number, value?: any) {
226 const [d] = dialogs.splice(i,1)
226 - ;(focusBak.pop() as any)?.focus?.() // if element is not HTMLElement, it doesn't have focus method
227 + d.restoreFocus?.focus?.() // if element is not HTMLElement, it doesn't have focus method
228 d.closingValue = value
229 d?.onClose?.(value)
230 return d