Skip to content
This repository was archived by the owner on Mar 13, 2025. It is now read-only.

Commit d016f31

Browse files
Merge pull request #565 from topcoder-platform/issue-45-fix
Fix logout dropdown hide on outside click
2 parents 8106667 + 19e1ac8 commit d016f31

File tree

2 files changed

+17
-1
lines changed

2 files changed

+17
-1
lines changed

client/src/components/Header/index.jsx

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,13 @@ export default function Header({
2828
const [searchText, setSearchText] = React.useState("");
2929
const [showAccountDropdown, setShowAccountDropdown] = React.useState(false);
3030

31+
const profileDropdownEl = React.useRef(null);
32+
React.useEffect(() => {
33+
if (showAccountDropdown) {
34+
profileDropdownEl.current.focus();
35+
}
36+
}, [showAccountDropdown]);
37+
3138
const handleSearch = (value) => {
3239
value = value || searchText;
3340

@@ -100,7 +107,12 @@ export default function Header({
100107
<div className={`${iconStyles.chevronDownG} ${style.arrow}`}></div>
101108
)}
102109
{showAccountDropdown && (
103-
<ul className={style.dropdown}>
110+
<ul
111+
tabIndex="0"
112+
className={style.dropdown}
113+
ref={profileDropdownEl}
114+
onBlur={() => setShowAccountDropdown(false)}
115+
>
104116
<li
105117
className={style.dropdownItem}
106118
onClick={() => logoutWithRedirect()}

client/src/components/Header/style.module.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,10 @@
3232
border-bottom-left-radius: 4px;
3333
border-bottom-right-radius: 4px;
3434
overflow: hidden;
35+
36+
&:focus {
37+
outline: none;
38+
}
3539
}
3640

3741
.dropdownItem {

0 commit comments

Comments
 (0)