This repository was archived by the owner on Mar 13, 2025. It is now read-only.
File tree 2 files changed +17
-1
lines changed
2 files changed +17
-1
lines changed Original file line number Diff line number Diff line change @@ -28,6 +28,13 @@ export default function Header({
28
28
const [ searchText , setSearchText ] = React . useState ( "" ) ;
29
29
const [ showAccountDropdown , setShowAccountDropdown ] = React . useState ( false ) ;
30
30
31
+ const profileDropdownEl = React . useRef ( null ) ;
32
+ React . useEffect ( ( ) => {
33
+ if ( showAccountDropdown ) {
34
+ profileDropdownEl . current . focus ( ) ;
35
+ }
36
+ } , [ showAccountDropdown ] ) ;
37
+
31
38
const handleSearch = ( value ) => {
32
39
value = value || searchText ;
33
40
@@ -100,7 +107,12 @@ export default function Header({
100
107
< div className = { `${ iconStyles . chevronDownG } ${ style . arrow } ` } > </ div >
101
108
) }
102
109
{ showAccountDropdown && (
103
- < ul className = { style . dropdown } >
110
+ < ul
111
+ tabIndex = "0"
112
+ className = { style . dropdown }
113
+ ref = { profileDropdownEl }
114
+ onBlur = { ( ) => setShowAccountDropdown ( false ) }
115
+ >
104
116
< li
105
117
className = { style . dropdownItem }
106
118
onClick = { ( ) => logoutWithRedirect ( ) }
Original file line number Diff line number Diff line change 32
32
border-bottom-left-radius : 4px ;
33
33
border-bottom-right-radius : 4px ;
34
34
overflow : hidden ;
35
+
36
+ & :focus {
37
+ outline : none ;
38
+ }
35
39
}
36
40
37
41
.dropdownItem {
You can’t perform that action at this time.
0 commit comments