You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Describe the bug
There's no default implementation for the Navbar.Link + Dropdown combination.
By default it can't be toggled, but there's a working hoverable prop. Without that prop, the active prop of Navbar.Link must be controlled, but a primitive onClick={toggleNavbar} implementation is not optimal because the dropdown won't collapse when clicking outside the dropdown or navigating between pages, which is standard behaviour.
Here's my click handling implementation as a custom hook, but i don't know if this is truly optimal for usability and accessibility. I personally like this behaviour though:
exportconstuseDropdownState=()=>{const[active,setActive]=useState(false);constlinkRef=useRef<RenderAsComponent>(null);useEffect(()=>{consthandler: EventListener=event=>{if(event.target===linkRef.current){// if the clicked element is the parent Navbar.Link// then don't set active to false, because otherwise// you can't open the dropdown at allreturn;}setActive(false);};window.addEventListener("click",handler);return()=>{window.removeEventListener("click",handler);};},[]);return{ active, setActive, linkRef };};
The text was updated successfully, but these errors were encountered:
Describe the bug
There's no default implementation for the Navbar.Link + Dropdown combination.
By default it can't be toggled, but there's a working
hoverable
prop. Without that prop, theactive
prop ofNavbar.Link
must be controlled, but a primitiveonClick={toggleNavbar}
implementation is not optimal because the dropdown won't collapse when clicking outside the dropdown or navigating between pages, which is standard behaviour.This can be seen in the documentation, which is why i'm not providing reproduction details: https://couds.github.io/react-bulma-components/?path=/story/components-navbar--default
Here's my click handling implementation as a custom hook, but i don't know if this is truly optimal for usability and accessibility. I personally like this behaviour though:
The text was updated successfully, but these errors were encountered: