[Feature]: adding state attribute to indicate when options are being shown

[hectorjjb]

Area

React Components (@fluentui/react-components)

Describe the feature that you would like added

I am working on enabling gamepad navigation for fluent components:
https://github.com/microsoft/fluentui-contrib/tree/main/packages/react-gamepad-navigation

unfortunately. there isn't a consisten way across browsers to know if the select element is displaying the option or not.
This behavior can be trigger by mouse, keyboard and touch events.
By doing something similar to focus attribute "data-fui-focus-visible" such as "data-fui-options-visible" it will be easier to provide a consistent experience across browsers.

More context:
When select element is already focused and User presses "A" button on controller (similar to pressing Enter key) the options should display. However, if options are already being displayed the same event (pressing A button) should change selected value and close option list. Without a consistent way to identify weather or not the option elements are already showed its hard to implement this functionality.

In addition, this new attribute (data-fui-options-visible) to the select element gives more flexibility to user to style select elements during either state.

Note: I could probably add this functionality on the GPN package but adding this state attribute to the element itself would be a more holistic approach to the problem.

Additional context

Have you discussed this feature with our team

@tudorpopams

Validations

• Check that there isn't already an issue that requests the same feature to avoid creating a duplicate.

Priority

High

[ling1726]

I don't think we should be promoting CSS selector targeting like this as it breaks the styling principles of Fluent. It also opens up the possibility for users to disregard the state and always read a DOM attribute to know when the select is open

Would it be possible achieve similar by controlling the state and just applying correct styles/functionality when the open state is true/false? https://react.fluentui.dev/?path=/docs/components-select--docs#controlled

EDIT: I didn't realize this was for Select, yeah I see the problem here, but I'm not actually sure if there's anything Fluent can do here. Would need to check for the native <select> API to know if there are any ways to know if it is open or not

[hectorjjb]

As far as I know there isn't a native way to figure out if element is open or closed 😔 the only approach I've seen is keeping track of state yourself, but we need to include: touch, mouse & keyboard events. So, I figure this would be best if it's implemented a the component level and exposed as a read-only property/attribute