Picker keyboard events in After Effects plugin

[ghost]

Hello everyone,

I'm encountering a challenge when using the Picker component from the Adobe React Spectrum library within an After Effects plugin. When the Picker is open and I attempt to type text to filter options (e.g., typing "M" for items starting with "M"), instead of filtering the options within the Picker, After Effects keyboard shortcuts assigned to those letters are triggered, which disrupts the effective use of the Picker.
e.g TextField works correctly - I can type text.

Example:
<Picker label="Choose frequency"> <Item key="rarely">Rarely</Item> <Item key="sometimes">Sometimes</Item> <Item key="always">Always</Item> </Picker>

[snowystinger]

do you have logic in your global keyboard shortcuts which ignores events on inputs?

I think we need more information here to know what's happening, right now I'm just making guesses.

Can you provide a codesandbox or stackblitz which shows the problem outside of your application? Otherwise, we'll need you to do some digging to see what is happening.

[ghost]

I'm attaching a video.

• when Picker opens
• I press a key, e.g. "d"
• the list does not scroll and does not select the first item starting with "d"
• trying with a different "a" button triggers the action assigned to the shortcut in After Effects (visible on the layers)
• only mouse selection works

Navigating with arrows and selecting items with enter also do not work

It works fine in the browser documentation https://react-spectrum.adobe.com/react-spectrum/Picker.html

• I can select an element from the list with the mouse, go to the first element by pressing the key, using the arrows and confirm with enter.

It looks as if opening Picker did not capture keyboard events.

https://streamable.com/f6o8lu
Uploading ae-spectrum-picker.mov…

[ghost]

@snowystinger
Hey, Do you know how to solve this problem?

[snowystinger]

Sorry, this slipped through the cracks. I watched the video, and I'll be honest, I don't really know what I was watching.

If it works fine in the docs and you can't reproduce it in a codesandbox/stackblitz, then it's likely interference from your application.

You'll need to do some digging as to why your app is doing this. Maybe your keyboard shortcut listeners need some extra logic when the event.target is a picker or listbox item or some other interactive element. Did you verify if they already have logic for the TextField? or why does that component work?