ListBox: Backspace/Delete

[getflourish]

I want to delete/remove items from a ListBox using keyboard events

I would like to use a ListBox for selection. In addition to onAction(), I need onDelete() or something low-level, such as, onKeyDown() to handle deletion of items.

Currently, neither ListBox nor ListBoxItem allow custom keyboard event handling. I could register a global listener, but: I then need to implement the follow-up selection logic.

I believe this behaviour should be baked into the component. Think about a email inbox in Apple Mail. Or… is there another component that support this interaction?

🤔 Expected Behavior?

Press backspace/delete on selected items fires and event / callback.

😯 Current Behavior

Currently, neither ListBox nor ListBoxItem allow custom keyboard event handling. I could register a global listener, but: I then need to implement the follow-up selection logic.

💁 Possible Solution

In addition to onAction(), I need onDelete() or something low-level, such as, onKeyDown() to handle deletion of items.

🔦 Context

Think about a email inbox in Apple Mail. You can select items, press backspace/delete to remove selected items.

💻 Examples

No response

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[reidbarber]

Seems related to #6839

[getflourish]

Thanks! I wonder if the same limitation applies to Tree? With Adobe making design tools, I would assume that Layer Trees should be possible to build with react-aria-components? Or does Spectrum add magic on top? Or do I need to use hooks and do more heavy lifting myself?

[devongovett]

I think we just need to pass through onKeyDown in ListBoxItem.

[getflourish]

That would help a lot! It allows for event handling on the item which is more specific than working around it with a global event listener and then filtering and so on

[hasegawa-101]

@snowystinger Can I work on this issue?