[React] Allow controllable activeIndex for Composite component

[kai-phan]

Composite is the greate component for build a Menu without the context of floating. Can we have a props like activeIndex to controll what CompositeItem is active or is there anyway to controll it ? Thank you for making the good library.

[atomiks]

Focusing an item (e.g. compositeItem.focus()) will change the activeIndex internally.

[kai-phan]

Focusing an item (e.g. compositeItem.focus()) will change the activeIndex internally.

Thank you for replying. Do you mean passing the ref to composite item ? I don't see any static method focus of CompositeItem. Thank!

[joaopedrocn]

Controlling the active index (via props like activeIndex and onNavigate) would be helpful in cases where the number of items may vary, or the active item may change unpredictably.

I created a calendar using the Composite component, and this is what happens when I select a day from the next month:

Selecting a day from a different month changes the currently displayed month, consequently altering the index of the selected day. However, the activeIndex managed internally by the Composite component doesn't update, leading to this little issue when navigating again with the arrow keys.

Furthermore, when the selected item is in the last row and the calendar switches to a month with fewer rows, the entire calendar becomes inaccessible via keyboard, as there is no active item at this point (i.e., no items with tabindex="0").

Having props to control the active item would help resolve these issues (using .focus() doesn't support all use cases because sometimes you may wish to change the activeIndex without focusing the item, such as when changing the month with the chevron buttons).

I think this would be a great feature. Love the library btw! :)

[atomiks]

Yeah I agree it's a necessary feature and is easy to implement. As a workaround at the moment, you can focus the item, changing the active index internally, then focus the chevron button immediately after to keep it on the button.