Autocomplete: entering text in input field messes with Storybook shortcuts

[jeffijoe]

Provide a general summary of the issue here

Typing in the autocomplete input triggers Storybook shortcuts, whereas typing in the same component without <Autocomplete> works as expected.

See the official Autocomplete example story.

🤔 Expected Behavior?

The input shouldn't be triggering app-wide shortcuts as the user is typing in the input field.

😯 Current Behavior

When hitting a key that has an application-defined shortcut, that shortcut is triggered, as well as the key is being entered.

💁 Possible Solution

No response

🔦 Context

It makes testing in Storybook a pain.

🖥️ Steps to Reproduce

1. Open the official Autocomplete storybook.
2. Focus the input field in the autocomplete
3. Type m
4. The Storybook "measure" tool is activated.

Do the same in a regular input, and it'll work as expected.

Version

react-aria: 3.38.1, react-aria-components: 1.7.1

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

You can disable storybook's shortcuts if you wish
https://storybook.js.org/docs/configure/user-interface/features-and-behavior

The issue of events leaking out is in our backlog here: RSP Component Milestones (view)

I'll leave this issue open until we work on that.

[levrik]

@snowystinger Not only the shortcuts are breaking. It also does not auto-focus the SearchField until you hover over a menu item. Also reproduces in official Storybook example.

[snowystinger]

That's a starting point, not an official example. You may reconfigure the storybook however you like.
For instance, you can turn off the shortcuts like so: https://github.com/adobe/react-spectrum/pull/7806/files

I do not see an autofocus on the searchfield, so I don't think it's expected to autofocus. It does focus on hover because this is a bit of a contrived example in that it exists outside of a popover where it would be more natural for this behaviour.
This is where the example is derived from https://react-spectrum.adobe.com/react-aria/Autocomplete.html#example

[levrik]

@snowystinger Yeah, maybe this does not apply to the Storybook example here. I have Autocomplete within a Popover in my application and outside of Storybook the SearchField auto-focuses when being opened while it does not within Storybook.

[Niznikr]

Running into a similar situation for an app using Commandbar to listen for global shortcuts. Autocomplete is leaking the input events when filtering the results and triggering those outside listeners.