Removing a Tag in a TagGroup with disabled Tags crashes the page

[kraine93]

Provide a general summary of the issue here

When combining two features of TagGroup - disabledKeys and onRemove - it's possible to crash the browser tab when removing a Tag.

This only seems to happen when there are at least two disabled Tags in the collection.

I'm able to reproduce in at least two ways:

1. Remove all non-disabled Tags from a collection (ctrl-a + backspace), leaving only disabled Tags remaining.
2. Remove the last Tag from the end of a collection where the (at least) two previous Tags are disabled.

It works fine when:

• There is only one disabled Tag.
• There is only one disabled Tag between the removed Tag and the next focusable Tag.

🤔 Expected Behavior?

The page should not crash and the next or previous non-disabled Tag should receive focus. If there are no remaining focusable Tags, the TagGroup or TagList should receive focus.

😯 Current Behavior

The page crashes.

💁 Possible Solution

At a guess, I would say that perhaps the TagGroup is struggling to find a valid target to move focus to when the element is removed.

🔦 Context

No response

🖥️ Steps to Reproduce

https://codesandbox.io/p/sandbox/exciting-hooks-6lhjcm

Delete the final tag 'Watermelon' to crash the tab.

Version

react-aria-components 1.2.1

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Windows

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Yep, found the issue, I've created a PR to fix it. Thanks for reporting it

[kraine93]

Amazing! Thanks for the quick fix 🚀