mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-08 12:32:43 +00:00
fix(documents): reclaim keyboard focus after the PDF preview loads
Chromium's PDF viewer grabs focus asynchronously once the inline preview initialises, stranding keyboard events inside the embedded document — Escape stopped closing the detail sheet the moment a PDF rendered. Watch for the steal over a short bounded window after load and hand focus back to the dialog container; a user who clicks into the PDF afterwards is left alone.
This commit is contained in:
1 parent
d937991af4
commit
0ed3d2fcc1
1 file changed
+20
-1
@@ -96,7 +96,26 @@ function InlinePreview({
|
||||
<iframe
|
||||
src={src}
|
||||
title={title}
|
||||
onLoad={() => setLoaded(true)}
|
||||
onLoad={(event) => {
|
||||
setLoaded(true);
|
||||
// Chromium's PDF viewer grabs focus when it initialises, which
|
||||
// strands keyboard events inside the embedded document — Escape
|
||||
// stops closing the sheet the moment the preview loads. The
|
||||
// steal lands asynchronously after `load`, so watch for it over
|
||||
// a short bounded window and hand focus back to the dialog
|
||||
// container (tabIndex -1). A user who clicks into the PDF later
|
||||
// re-focuses it deliberately and is left alone.
|
||||
const frame = event.currentTarget;
|
||||
const until = Date.now() + 1_500;
|
||||
const reclaim = () => {
|
||||
if (document.activeElement === frame) {
|
||||
frame.closest<HTMLElement>('[role="dialog"]')?.focus();
|
||||
return;
|
||||
}
|
||||
if (Date.now() < until) setTimeout(reclaim, 100);
|
||||
};
|
||||
reclaim();
|
||||
}}
|
||||
className={cn(
|
||||
"border-border h-[55vh] w-full rounded-lg border",
|
||||
!loaded && "absolute inset-0 opacity-0",
|
||||
|
||||
Reference in new issue
Block a user