Closed daniel17903 closed 2 years ago
You are referencing the HTML documentation, not the web API documentation of HTMLElement
. tabIndex
is camel-cased: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex
Also the current behavior is expected. The focus event is trapped to elements inside the modal. The new behavior is broken because node.tabindex
is always undefined
. It also throws Uncaught TypeError: tabbable[index] is undefined
.
I don't exactly know what you're trying to achieve with this code change.
Sorry, you are right, camelCase is correct and I understand that the focus should be trapped inside the modal. My issue is that the focus order set by tabIndex is currently ignored. I updated my code to fix it.
Currently Observerd Behaviour In my demo I have three inputs in the modal with tabIndex="2", tabIndex="1" and tabIndex="3". When focusing the first input field and pressing Tab, focus jumps to the second input field. Demo: https://svelte.dev/repl/f2da168bd00b4ea08acc63c5719b67d9?version=3.48.0
New Behaviour When focusing the first input field and pressing Tab, focus jumps to the third input field. Because as the web API documentation says "Navigation proceeds from the lowest tabIndex to the highest tabIndex." (https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex). Demo: https://svelte.dev/repl/c3f863d92a304217ab8b74cb9dd3ac42?version=3.48.0
I just released v1.3.4 which contains the fix from your PR! Thanks again 🙏
Background
Hi, I have a Svelte App with multiple input fields inside the modal. I cannot use tabindex to switch between inputs. This is because the tabindex attribute should be written in lower case (see https://html.spec.whatwg.org/multipage/interaction.html#attr-tabindex).
Currently Observed Behavior
I cannot use tabindex to switch between inputs. Demo: https://svelte.dev/repl/f2da168bd00b4ea08acc63c5719b67d9?version=3.48.0
New Behavior
I can use tabindex to switch betwwen inputs. Demo: https://svelte.dev/repl/f15d53f9987d4eb4afe7d01db72a2f24?version=3.48.0