I'm using Material-ui's Popover as a menu that opens on a card component when clicking on 3-dot icon.
so far so good
the Popover knows how to open when i click the icon, and close when clicking outside.
but.
I want to be able to click on a card menu, open a popover, and then click on another card's menu so it will be closed and opened on that card.
this is how it looks like:
i did try to use hideBackdrop={true} but it blocks the click outside the popover.
i tried to use disableEnforceFocus but it didn't work.
i didnt found any way to enable click outside behind the backdrop / overlay.
can someone please tell me what do i miss here?
tnx!
im using "#material-ui/core": "^4.12.3",
"react": "^16.14.0",
Related
I am using react with material-UI, I designed the drop down menu button and it is opening somewhere else on the screen.
It happens when I add
className={styling.unit_menu}
in Menu button, When I add my own styling, then it happens
Here is the link for my code
code link
I'm using react and typescript.
The animation is done using framer-motion.
When the button is pressed, the menubar opens. frame-motion animation is implemented in the menuItem, but the menuItem is not moving.
I made it myself.
https://codesandbox.io/s/elastic-elion-lgpnh?file=/src/App.tsx
Refarence site
https://codesandbox.io/s/framer-motion-side-menu-mx2rw?fontsize=14&module=%2Fsrc%2FExample.tsx
You need to inform the children that the animation changed from open to closed or vice-versa upon the menu button click.
With little modifications, I made it work for staggering the menu items upon menu open. You can check the codesandbox here
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
Reproduction link
Steps to reproduce
Click on open dialog
Click on open popup
Try to enter any text. You won't be able to able the text inside popup fields.
What is expected?
I should be able to enter text inside input field in the popup.
What is actually happening?
When the antd popup is opened inside a dialog, I am able to see the popup by changin z-index but I am not able to enter anything inside popup.
EnvironmentInfo
antd 3.13.6
React v16.4.1
System mac os 10.14.2
Browser reactjs v16.4.1
Can you change your Dialog to:
<Dialog
fullScreen
open={this.state.open}
onClose={this.handleClose}
TransitionComponent={Transition}
disableEnforceFocus={true}
>
This should fix the issue.
I have just started learning AngularJS and have created a header using md-toolbar. I have 3 buttons (Home, About and Enquiries) Each button has a tooltip that displays when hovered over. The 'Enquiries' button opens a sidenav. However, when I close the sidenav the 'Enquiries' button tooltip redisplays and does not fadeout. If I move the sidenav function call to the 'About' button, the same thing happens. It looks like the button that opened the sidenav will have it's tooltip redisplayed when the sidenav that it opened is closed. Any ideas on a solution please?