Fix TAB behaviour for forms: add a condition when to prevent default behaviour (#3508)

Signed-off-by: Maksim Karmatskikh <mkarmatskih@gmail.com>
Co-authored-by: Maxim Karmatskih <mk@jetstyle.co>
This commit is contained in:
Maksim Karmatskikh 2023-07-19 23:09:08 +06:00 committed by GitHub
parent 92ab38456b
commit f8e00ed880
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 7 deletions

View File

@ -6,9 +6,11 @@
function handleKey (evt: KeyboardEvent): void {
if (evt.code === 'Tab' && isEnabled) {
const result = manager.next(evt.shiftKey ? -1 : 1)
if (result) {
evt.preventDefault()
evt.stopPropagation()
manager.next(evt.shiftKey ? -1 : 1)
}
}
}
</script>

View File

@ -4,7 +4,7 @@ import { getContext, onDestroy, setContext } from 'svelte'
* @public
*/
export interface FocusManager {
next: (inc?: 1 | -1) => void
next: (inc?: 1 | -1) => boolean
setFocus: (idx: number) => void
setFocusPos: (order: number) => void
updateFocus: (idx: number, order: number) => void
@ -43,15 +43,15 @@ class FocusManagerImpl implements FocusManager {
})
}
next (inc?: 1 | -1): void {
next (inc?: 1 | -1): boolean {
const current = this.elements[this.current]
if (!(current?.canBlur?.() ?? false)) {
return
return false
}
while (true) {
this.current = this.current + (inc ?? 1)
if (this.elements[Math.abs(this.current) % this.elements.length].focus()) {
break
return true
}
}
}