Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Menu Drop down #1342

Merged
merged 2 commits into from
Dec 20, 2024
Merged

fix: Menu Drop down #1342

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
72575ff
bug correction
snmln Dec 18, 2024
5acc803
implemenying custom hook
snmln Dec 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 14 additions & 4 deletions app/scripts/components/common/page-header/nav/nav-dropdown-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import React from 'react';
import React, { useCallback } from 'react';
import { USWDSNavDropDownButton } from '../../uswds/header/nav-drop-down-button';
import { USWDSMenu } from '../../uswds/header/menu';
import { DropdownNavLink } from '../types';
import { createDynamicNavMenuList } from './create-dynamic-nav-menu-list';
import { SetState } from '$types/aliases';
import { LinkProperties } from '$types/veda';
import { useClickOutside } from '$utils/use-click-outside';

interface NavDropDownButtonProps {
item: DropdownNavLink;
Expand Down Expand Up @@ -32,11 +33,20 @@ export const NavDropDownButton = ({
return newIsOpen;
});
};

const handleClickOutside = useCallback(() => {
if (isOpen[index]) {
setIsOpen((prevIsOpen) => {
const newIsOpen = [...prevIsOpen];
newIsOpen[index] = false;
return newIsOpen;
});
}
}, [index, isOpen, setIsOpen]);
const dropdownRef = useClickOutside(handleClickOutside);
const submenuItems = createDynamicNavMenuList(item.children, linkProperties);

return (
<React.Fragment key={item.id}>
<div key={item.id} ref={dropdownRef}>
<USWDSNavDropDownButton
onToggle={() => onToggle(index, setIsOpen)}
menuId={item.title}
Expand All @@ -48,6 +58,6 @@ export const NavDropDownButton = ({
isOpen={isOpen[index]}
id={`${item.id}-dropdown`}
/>
</React.Fragment>
</div>
);
};
15 changes: 15 additions & 0 deletions app/scripts/utils/use-click-outside.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { useEffect, useRef } from 'react';
Copy link
Member

@AliceR AliceR Dec 19, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not very important, but maybe we can move both use-fix-hooks in the same directory? app/scripts/components/common/page-header/use-mobile-menu-fix.ts is the one i implemented for the resize bug. I don't care which directory, but I like them together 🙂

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@AliceR I think the new hook is generic enough to be useful in other places not limited to this component, so it might make sense to keep it in the general utils directory?

export const useClickOutside = (onClose: () => void) => {
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (ref.current && !ref.current.contains(event.target as Node)) {
onClose();
}
};
document.addEventListener('click', handleClickOutside, true);
return () =>
document.removeEventListener('click', handleClickOutside, true);
}, [onClose]);
return ref;
};
Loading