From f8e00ed88036c23347223b3eae87117784c15065 Mon Sep 17 00:00:00 2001 From: Maksim Karmatskikh Date: Wed, 19 Jul 2023 23:09:08 +0600 Subject: [PATCH] Fix TAB behaviour for forms: add a condition when to prevent default behaviour (#3508) Signed-off-by: Maksim Karmatskikh Co-authored-by: Maxim Karmatskih --- packages/ui/src/components/FocusHandler.svelte | 8 +++++--- packages/ui/src/focus.ts | 8 ++++---- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/ui/src/components/FocusHandler.svelte b/packages/ui/src/components/FocusHandler.svelte index e31bb1f286..12aa768ef2 100644 --- a/packages/ui/src/components/FocusHandler.svelte +++ b/packages/ui/src/components/FocusHandler.svelte @@ -6,9 +6,11 @@ function handleKey (evt: KeyboardEvent): void { if (evt.code === 'Tab' && isEnabled) { - evt.preventDefault() - evt.stopPropagation() - manager.next(evt.shiftKey ? -1 : 1) + const result = manager.next(evt.shiftKey ? -1 : 1) + if (result) { + evt.preventDefault() + evt.stopPropagation() + } } } diff --git a/packages/ui/src/focus.ts b/packages/ui/src/focus.ts index 297d7828d3..c8daf4d1cd 100644 --- a/packages/ui/src/focus.ts +++ b/packages/ui/src/focus.ts @@ -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 } } }