In RAC, on Esc click list box options are getting cleared how can i avoid this.

[RajaTheKing826]

Im using react aria components 1.3.3 version. In my component when i click ESC after opening the listbox my selected items are getting cleared how can i stop this?

[snowystinger]

Can you provide an example? I'm not sure what "my component" is, and we'll need to determine if we missed a behavior that should be controllable.

https://react-spectrum.adobe.com/react-aria/ComboBox.html#combobox If I select an option in the first example, then open the popup by deleting a letter, it'll cancel the change and the selection remains.

https://react-spectrum.adobe.com/react-aria/ListBox.html Esc clears the selection when focus is inside the ListBox

https://react-spectrum.adobe.com/react-aria/Menu.html#multiple Escape closes the menu and does not de-select

[RajaTheKing826]

https://react-spectrum.adobe.com/react-aria/ListBox.html Esc clears the selection when focus is inside the ListBox

You can refer this codesandbox -> https://codesandbox.io/p/sandbox/7ljm5l?file=%2Fsrc%2FApp.js ,In the console, when I press 'Esc,' all my selected items are getting cleared, resulting in an empty array on selection change. However, I want to prevent this behavior so that pressing 'Esc' doesn't clear the selected items. How can I achieve this?

[RajaTheKing826]

Our business requirements dictate that I need to render this listbox within a popover. In my use case, after selecting multiple items from the listbox, the user closes the popover by pressing 'Esc.' However, along with closing the popover, the selected items are also being cleared, which is not the expected behavior.

[snowystinger]

Thank you, the easiest way would probably be to create a capturing keydown listener. On Escape, stop the propagation and close the popover.

[RajaTheKing826]

Ever before stopping the propagation selected elements are getting cleared and ListBox doesn't has a on keydown prop to capture the event. Then how can i do this ??

And listbox not forwarding the onKeyDown to its parent containers, somewhere the propagation is getting stopped.

I've found this in useSelectableCollection . This is why i'm not getting the event to stop the propagation.

case 'Escape':
                if (!disallowEmptySelection && manager.selectedKeys.size !== 0) {
                    e.stopPropagation();
                    e.preventDefault();
                    manager.clearSelection();
                }
                break;

Are there any other ways to override this apart from a patch, why can't you provide some props or callbacks to handle this?

[RajaTheKing826]

@snowystinger

[snowystinger]

That's not a capturing listener, if you use a capturing one on a wrapper element then you'll be ahead in the events and you can stop it and/or respond to it before it ever gets to that line.
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#capture