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
Related
I use React MUI and some components disable my draggables.
I have put draggables on my page, that works perfectly.
When my draggable is dragged, I change some nodes in the page.
I'm on React MUI and I use tooltips, modals and menus on that page. After opening one of them and close it, no draggables can be dragged anymore. I mean that changing some nodes in the page makes that the drag ends directly.
Is there an event inserted or something like that that ends the drag action if an element is changing in the page ?
I found a workaround.
Actually this happens on Chrome and Safari only. Adding a setTimeout of 10ms before changing the DOM makes the job.
I have a React App where the user can toggle between different views of the same data structure. When toggling from one view to another, the browser window sometimes automatically scrolls vertically. Instead I am expecting the window to not scroll when possible.
The CodeSandbox here reproduces the issue:
https://codesandbox.io/embed/magical-chebyshev-otlpu?fontsize=14&hidenavigation=1&theme=dark
If you scroll down, then click on "CLICK TO SWITCH VIEW BELOW", you will notice that there's an automatic scroll to the top happening.
I suspect this is an issue with MUI TextField. If I change the MUI TextField to a div, the issue does not show up, so I don't think this is due to React.
I've just started using React AntD library Select component. I noticed that when you have the select dropdown open and if you mouse leave it, the last hovered on option stays visible. Is there a way to override this behaviour? I want to remove the hovered on styling once my mouse leaves the select component...
Thanks in advance!
The last hovered on option stays visible only if you've clicked that placement. If you don't clicked that placement and just hover on option, then your last hovered on option will not stay visible. So, you can't override this behaviour.
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.
I am looking at the material-ui website and trying to achevie the following functionality - show a menu when an IconButton is clicked ?
As per the example it seems there is a lot of code involved? What is the purpose of anchorEl in the example shown https://material-ui.com/demos/menus/
From the MaterialUI Menu API page:
anchorEl: The DOM element used to set the position of the menu.