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 { function handleKey (evt: KeyboardEvent): void {
if (evt.code === 'Tab' && isEnabled) { if (evt.code === 'Tab' && isEnabled) {
evt.preventDefault() const result = manager.next(evt.shiftKey ? -1 : 1)
evt.stopPropagation() if (result) {
manager.next(evt.shiftKey ? -1 : 1) evt.preventDefault()
evt.stopPropagation()
}
} }
} }
</script> </script>

View File

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