search

dnbexperience / eufemia

DNB Design System
https://eufemia.dnb.no
Other
53 stars 31 forks source link

Autocomplete: Focus issues with the Autocomplete component (when data is empty) #3419

Open kimroen opened 7 months ago

kimroen commented 7 months ago

🐛 Bug Report

In some scenarios such as the one described below, the Autocomplete component does not allow moving focus away from it through normal means (like clicking outside of it, clicking a different element, or tabbing with the keyboard).

This causes some unexpected behavior as you can see in this GIF:

CleanShot 2024-03-19 at 15 24 10

The second autocomplete has this bug, the first one does not.

Interestingly, the top item does open its drawer when being clicked, but the second input still also has the focus state and styling.

To Reproduce

One way of reproducing this behavior is to set open_on_focus and have an empty data property. Here's a CodeSandbox recreating this.

Both these inputs have open_on_focus: the top one has some data and behaves as expected, but the bottom one will not allow moving focus elsewhere using the mouse.

Expected behavior

The autocomplete component should allow navigating away by any normal input method.

Eufemia Version

10.22.0

kimroen commented 4 months ago

Retested on 10.38 and updated the codesandbox since I saw that there has been some fixes related to Autocomplete. This issue remains on this version, unfortunately.