I am using Chakra UI's useDisclosure hook to toggle the dropdown of the nav bar item. The dropdown is toggled on click. I have multiple menu items in the nav bar with dropdowns. I would like to keep only the active dropdown open at a time, but I don't know how to close previous ones?
Here is the full working thing in Codesandbox to see what I have.
Related
i want to change accordion content on clicking the navdropdown menu items using react .i have tried using react-modal . but it didnt work . i dont want the popup . just want to change the accordion content on dropdown menu item click.
have the content of the accordion inside the state
when clicking on navdropdown menu you can update the state
How to show dropdown on button click using material ui?
Currently, I'm able to do so but extra select field is getting populated which is not required. I don't want to hide select field with css.
Also, How can I change width, height, position and other properties of generated popover using material ui?
codesandbox url: https://codesandbox.io/s/du8mr
current implementation
popover
You can use Menu component instead of a Select component.
You can change the Menu props using MenuProps which receives all Popover props.
From Menu documentation:
Any other props supplied will be provided to the root element (Popover).
I have a menu component that uses popperjs for showing the popup menu. When clicked on the button for the first time the popup appears at top left corner of the screen instead of below the button. I have used react portal for placing the rendered menu.
The problem resolves when I use useState hook to capture references of popper and reference elements(as suggested in the examples on react-popper). But I have implemented a clickaway hook to hide popup when you click any where but the popup, for which I need to use useRef.
and then I do usePopper(refElem.current, popperElem.current). I have reproduced the problem here
I use React and Material-UI. I use huge Popover with the Tooltip behaviour. The goal is to display data when the user hover some links. It's working well but i have a problem about scrolling.
I want to be able to scroll INSIDE the popover when the Mouse is inside it. The default behaviour is to let the user scroll the entire page instead of focus on the popover.
I have set a CodeSansBox to show you.
Material UI gives us a prop to replace the default dropdown icon on the MuiSelect component. However, a custom icon isn't automatically given the same functionality as the default of rotating 180 degrees to visually show when menu is open/closed.
I'm wondering if there is any way to easily add this. I want to globally replace all of the Dropdown icons.