@txstate-mws/svelte-components 1.6.15 → 1.6.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -13,7 +13,7 @@ When they do, the escape event will be fired, allowing you to remove the dialog.
|
|
|
13
13
|
When it goes away, they'll be trapped inside the previous `FocusLock`, and so on.
|
|
14
14
|
-->
|
|
15
15
|
<script context="module" lang="ts">
|
|
16
|
-
export const FocusLockStack: { focusId: string, pause: () => void, unpause: () => void, update: () => void }[] = []
|
|
16
|
+
export const FocusLockStack: { focusId: string, pause: () => void, unpause: () => void, update: () => void, inheritReturnFocus: (el: HTMLElement) => void }[] = []
|
|
17
17
|
const waitAtick = typeof requestAnimationFrame !== 'undefined' ? (resolve: (value: unknown) => void) => requestAnimationFrame(resolve) : (resolve: (value: unknown) => void) => resolve(0)
|
|
18
18
|
</script>
|
|
19
19
|
|
|
@@ -49,7 +49,13 @@ When it goes away, they'll be trapped inside the previous `FocusLock`, and so on
|
|
|
49
49
|
focusId,
|
|
50
50
|
pause: () => { state = 'paused' },
|
|
51
51
|
unpause: () => { if (state === 'paused') state = 'active' },
|
|
52
|
-
update: () => { dispatch('focuslockupdate') }
|
|
52
|
+
update: () => { dispatch('focuslockupdate') },
|
|
53
|
+
inheritReturnFocus: el => {
|
|
54
|
+
// only accept a hand-me-down if our own recorded target is useless - we
|
|
55
|
+
// captured document.activeElement after the previous lock's content was
|
|
56
|
+
// already removed, so it's usually document.body or a disconnected element
|
|
57
|
+
if (!returnfocusto || returnfocusto === document.body || !returnfocusto.isConnected) returnfocusto = el
|
|
58
|
+
}
|
|
53
59
|
})
|
|
54
60
|
for (const entry of FocusLockStack) entry.update()
|
|
55
61
|
if (typeof returnfocusto === 'undefined') {
|
|
@@ -76,8 +82,17 @@ When it goes away, they'll be trapped inside the previous `FocusLock`, and so on
|
|
|
76
82
|
// will think it was an "outside" click and kill itself
|
|
77
83
|
await new Promise(waitAtick)
|
|
78
84
|
|
|
79
|
-
|
|
80
|
-
|
|
85
|
+
const top = FocusLockStack.slice(-1)[0]
|
|
86
|
+
if (top?.focusId === focusId) {
|
|
87
|
+
// never restore focus to document.body - it accomplishes nothing except
|
|
88
|
+
// blurring whatever the user has focused since we began closing
|
|
89
|
+
if (returnfocusto && wasactive && returnfocusto !== document.body) returnfocusto.focus()
|
|
90
|
+
} else if (top && returnfocusto?.isConnected && returnfocusto !== document.body) {
|
|
91
|
+
// another focus lock mounted while we were waiting (e.g. one modal replaced
|
|
92
|
+
// by another in the same update) and has taken focus - restoring ours would
|
|
93
|
+
// steal it back out of the new dialog. instead, hand our return target down
|
|
94
|
+
// the chain so the final modal can return focus to the original trigger
|
|
95
|
+
top.inheritReturnFocus(returnfocusto)
|
|
81
96
|
}
|
|
82
97
|
const idx = FocusLockStack.findIndex(f => f.focusId === focusId)
|
|
83
98
|
if (idx > -1) FocusLockStack.splice(idx, 1)
|
|
@@ -98,7 +113,7 @@ When it goes away, they'll be trapped inside the previous `FocusLock`, and so on
|
|
|
98
113
|
}
|
|
99
114
|
}
|
|
100
115
|
const keydown = (e: KeyboardEvent) => {
|
|
101
|
-
if (state === 'active' && e.key === 'Escape' && escapable) {
|
|
116
|
+
if ((state === 'active' || state === 'init') && e.key === 'Escape' && escapable) {
|
|
102
117
|
e.preventDefault()
|
|
103
118
|
dispatch('escape')
|
|
104
119
|
}
|