[Bug report]: Unable tab between input components, using tab-key

[thezic]

Requirements before reporting

• No duplicated issue reported.
• I have read the contribution guidelines.
• I have checked the lastest version if the bug exist there. See all avaliable packages at npmJS.com
• I have made sure that the issue comes from SDDS packages by removing SDDS from my project as a test.
• I have followed the installation guide.

Package

@scania/components

Package versions

@scania/components 4.6.0

Browser

Edge (Chromium)

Framework

React

Version

No response

Reproduction steps

Press tab while in a form with scania components.

Code example

<div>
    <sdds-textfield></sdds-textfield>
    <sdds-textfield></sdds-textfield>
    <sdds-textfield></sdds-textfield>
    <sdds-textfield></sdds-textfield>
    <sdds-textfield></sdds-textfield>
    <sdds-textfield></sdds-textfield>
</div>

Screenshots

Add/Copy screenshot here

Expected behaviour

When pressing the tab key, focus should be moved from one component to another. Instead no component is focused. If an tabindex-attribute is given, the root-component will be focused, but not the input component.

Console errors

Add warning/error message

Contact information

simon.dahlberg [at] cdab.eu

[thezic]

I checked the source, and this could be fixed by either by using { delegatesFocus: true } when creating the shadow dom, or by listening on focus events on the root-component, and manually set focus to the input component

[alexlioliopoulos]

Checking our demo page, this seems to work fine in Angular. Interesting that this is a problem in React, but thanks for reporting. We will look into it.

[thezic]

That's really interesting, there shouldn't be such a difference. The problem I see might be a combination of other things, I'll investigate this a bit further

[thezic]

This problem is a bit different than I first thought. We use sdds-components inside a focus trap (from headlessui). Inside this focus trap I cannot use tab to navigate between components. But if I use { delegatesFocus: true } it works.

outside the focus-trap tabbing between components does work, as in your demo page.

[thezic]

I am closing this issue, as it's not a problem with sdds.

Thanks for the quick response!