fluxerapp/fluxer
1
0
Fork 0
mirror of https://github.com/fluxerapp/fluxer.git synced 2026-09-02 21:04:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): keep the focus ring stable across refocus (#2366)

Browse Source
This commit is contained in:
Hampus
2026-09-02 17:27:57 +02:00
committed by GitHub
parent 1acd61a112
commit ee8fbd6f4f
2 changed files with 19 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
fluxer_app/src/features/ui/focus_ring/FocusRingManager.ts
+6 -4
View File
@@ -1,15 +1,17 @@
// SPDX-License-Identifier: AGPL-3.0-or-later
import {ACTIVE_RING_CONTEXT_MANAGER} from '@app/features/ui/focus_ring/FocusRingContext';
import {makeAutoObservable} from 'mobx';
class FocusRingManagerClass {
ringsEnabled = true;
constructor() {
makeAutoObservable(this, {}, {autoBind: true});
}
setRingsEnabled(enabled: boolean) {
if (this.ringsEnabled === enabled) return;
this.ringsEnabled = enabled;
if (!enabled) {
ACTIVE_RING_CONTEXT_MANAGER?.hide();
}
}
}
fluxer_app/src/features/ui/focus_ring/FocusRingScope.tsx
+13 -6
View File
@@ -4,6 +4,7 @@ import styles from '@app/features/ui/focus_ring/FocusRing.module.css';
import FocusRingContext, {FocusRingContextManager} from '@app/features/ui/focus_ring/FocusRingContext';
import FocusRingManager from '@app/features/ui/focus_ring/FocusRingManager';
import {clsx} from 'clsx';
import {Observer} from 'mobx-react-lite';
import type * as React from 'react';
import {useContext, useEffect, useReducer, useRef} from 'react';
@@ -55,12 +56,18 @@ function Ring() {
resizeObserver.disconnect();
};
}, [ringContext, targetElement]);
if (!FocusRingManager.ringsEnabled || !ringContext.visible) return null;
return (
<div
className={clsx(styles.focusRing, ringContext.className)}
style={ringContext.getStyle()}
data-flx="ui.focus-ring.focus-ring-scope.ring.focus-ring"
/>
<Observer data-flx="ui.focus-ring.focus-ring-scope.ring.observer">
{() => {
if (!FocusRingManager.ringsEnabled || !ringContext.visible) return null;
return (
<div
className={clsx(styles.focusRing, ringContext.className)}
style={ringContext.getStyle()}
data-flx="ui.focus-ring.focus-ring-scope.ring.focus-ring"
/>
);
}}
</Observer>
);
}