Clay: When ClayDropdown trigger element get the focus it cannot be changed with tab

[victorg1991]

What are the steps to reproduce?

Open the storyboard here You have to tab until the dropdown button is focused, after that you cannot change focus with tab

What is the expected result?

Changing focus with tab should focus

Environment

| Tech | Version |
| ------- | ------- |
| Clay | v3.0.0 |
| React | 16.9.0 |

[matuzalemsteles]

hey @victorg1991 can you reproduce this out of the storybook? We have focus control for these components. But inside the Storybook this really ends up having problems like not exiting, it turns out that Storybook renders an iframe with the components so that it keeps the component isolated from the application, so that prevents us from focusing manually. In a single app application environment this should work fine. Do you have any specific cases that render within the iframe?

[victorg1991]

Hey @matuzalemsteles, sorry for the delay, here you have an example :)

In case it helps debugging, it seems that if you add another button in react, the focus changes to that button correctly, but in case you only have one, like in this example once you get the focus, it is are trapped

I hope it helps, if you need something else, please let me know :)

Thanks!

[matuzalemsteles]

Thanks @victorg1991, the examples will help, this is a limitation of our focus manager, it only deals with the React tree. Let's look for a solution to these cases.

[victorg1991]

I noticed that the issue is only reproducible if there are only one react focusable element

[victorg1991]

Thanks!

[oliv-yu]

Thanks for filing this! I think I have a related issue with list items and ClayDropdown, thought I'd add it to this thread:

1. Make a list group with several items
2. Give the 'list-group-item' a tabIndex of '0'
3. Add a ClayDropdown inside the list item
4. Try to tab through the list items

Relevant sandbox: https://codesandbox.io/embed/withered-frost-zkblh

@thektan

[matuzalemsteles]

Hmm, This is an interesting case. Thanks for bringing this @oliv-yu, I will review this next week and bring more information.