Default MediaInput styling on click spreads over all MediaInputs on the page

[nyckyta]

Expectations

First of all, I expect that when I click on MediaInput only that component I clicked on should be highlighted and styled as focused.
For example, this is the way it works with regular inputs.

Screen.Recording.2023-12-23.at.16.21.02.mov

Second, you can see that in the end of the video I clicked on the empty area and focus was removed from the focused component.

Reality

When I use completely the same code with MediaInput, it focuses both inputs and it is impossible to remove focus clicking on the empty are.

Screen.Recording.2023-12-23.at.16.25.48.mov

Steps to Reproduce

Just render few components and click on them by left mouse button in the way it is depicted on video. No 'custom' configuration is needed.

There is a sandbox example

Fine Print

• Component: @zendesk-garden/react-forms/MediaInput
• Version: looks like it is latest
• Browsers: tried in a firefox and chrome

[nyckyta]

Btw, the similar issue appears with Multiselects (when you select Multiselect it focuses all Multiselects as well as all MediaInputs on the page). However, I see that it is deprecated and new Comboboxes do not have this issue.

I hope this will help you to figure out the issue.

[jzempel]

@nyckyta I'm running your example here and focus is working as expected: https://codesandbox.io/p/sandbox/multi-inputs-2xvnc8

[nyckyta]

Hi @jzempel . Right, it has been fixed on our side as well since few last builds. I suppose it was related to some dependecies, but unfortunately we did not track lock file properly.

So, I believe this ticket can be closed unless you want to have investigation anyway.

[jzempel]

Thanks @nyckyta. Please re-open if you experience unexpected results.