Enhancement Request for Select Component - Adding cause Attribute to onHighlightChange Event

[AndrejNemec]

I'd like to propose an enhancement to the Select component, specifically related to the onHighlightChange event. It would be highly beneficial to include an additional attribute: cause, in the event details. This attribute would store information about the event that triggered onHighlightChange.

The main reason for this enhancement is to aid in the development of virtual selectors. Currently, when creating a virtual selector, invoking scrollToIndex from a virtualizer within the onHighlightChange event is also executed during hover actions. This can cause undesirable shaking if the element is outside of the viewport.

The proposed cause attribute would have values like 'hover', 'keyboard', 'typeahead', 'open', etc. This addition would provide more control and precision in handling different scenarios, improving the usability and functionality of virtual selectors.

[Omikorin]

Hi, thank you for the proposition. It's a subject to the Zag.

@segunadebayo

[segunadebayo]

That's a great idea @AndrejNemec.

Will look into this shortly

[AndrejNemec]

Any update?

[100terres]

@segunadebayo is there something I could do to help with this feature?

That information would also be useful on the Menu component.

The use case that I have is that we want to have a different style based on what caused the item to be highlighted. For example, if it were caused by a keyboard event, we would like to have an outline around the item. But with a pointer event, we would prefer not to display an outline.

Currently, we need to create a dedicated state for this and manually decorate some of Zag's event listeners to update the state.