runfix: allow keyboard navigation in full screen device select (WPB-6075) #16295
Conversation
Codecov ReportAttention:
Additional details and impacted files@@ Coverage Diff @@
## dev #16295 +/- ##
========================================
+ Coverage 0 45.42% +45.42%
========================================
Files 0 740 +740
Lines 0 24218 +24218
Branches 0 5504 +5504
========================================
+ Hits 0 11000 +11000
- Misses 0 11806 +11806
- Partials 0 1412 +1412 |
V-Gira
force-pushed
the
virgile/keyboard-nav-av-settings
branch
from
eb1f320 to
7208811
Compare
| @@ -465,6 +470,8 @@ const FullscreenVideoCall: React.FC<FullscreenVideoCallProps> = ({ | |||
| {audioOptionsOpen ? ( | |||
| <> | |||
| <Select | |||
| // eslint-disable-next-line jsx-a11y/no-autofocus | |||
| autoFocus | |||
There was a problem hiding this comment.
autoFocus is needed foe arrow navigation to function in the menu
| onClick={() => { | ||
| setAudioOptionsOpen(prev => !prev); | ||
| onClick={event => { | ||
| const target = event.target as Element; | ||
| if (!target.closest('#select-microphone')) { | ||
| setAudioOptionsOpen(prev => !prev); | ||
| } |
There was a problem hiding this comment.
prevents the onclick event to trigger in the select menu
It would trigger when selecting an option right after setting the optionsOpen state of the menu to false, leaving the menu open
There was a problem hiding this comment.
so you cannot toggle the button anymore? How do you close it?
There was a problem hiding this comment.
I'll add the code comment to make that clearer
The select menu (#select-microphone) is part of the button.
If it's not the target of the click event (when the actual dropdown arrow is clicked), the toggle works normally
There was a problem hiding this comment.
does this clear things up?
// We want to ensure to only toggling the menu open or closed when clicking the icon, not the select menu
| @@ -238,6 +239,7 @@ const FullscreenVideoCall: React.FC<FullscreenVideoCallProps> = ({ | |||
| const camera = videoOptions[0].options.find(item => item.value === selectedOption) ?? selectedVideoOptions[0]; | |||
| setSelectedVideoOptions([camera]); | |||
| switchCameraInput(camera.id); | |||
| setVideoOptionsOpen(false); | |||
There was a problem hiding this comment.
We set the optionsOpen state to false here in the updateOptions method instead of toggling it off on the click event
V-Gira
changed the title
Description
Arrow navigation doesn't work to select a device in the new select in full screen calls
Checklist