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
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 basic create-react-app with Material/MUI text field and button. When I tab from the textfield to the button, it creates an animation on the button where the middle part slightly grows and shrinks. I'm trying to figure out how to get rid of that animation and just show a simple button that has focus. Toggling the options in Chrome debugger hasn't helped me track down where this animation is being created (focus, hover, etc.). In fact, anytime I change any property in the CSS panel it turns the animation off and makes it harder to track down what is causing this.
Thanks.
I have a loading overlay that uses the MUI Backdrop component. This works perfectly fine until I have a MUI Dialog open or a MUI Drawer open. In these scenarios, the Backdrop component renders behind the Dialog or Drawer. I have tried even throwing an !important on the zIndex of the Backdrop and setting it to 10000 and it will still render behind the Dialog or Drawer every time.
Has anyone else ever had this issue and been able to figure out how to get the Backdrop to always show up on top of any element on the page?
without a code example I am not 100 but I hope this helps... both Drawer (via passing modal in its props) and Dialog use the Backdrop component. So perhaps it is the parent div which zIndex needs to be altered? In sandbox below I found wrapping the Backdrop into a Grid and then setting the zindex on the parent/Grid works. Here's various setups of Backgrounds with Drawers and Dialogs :
https://codesandbox.io/s/romantic-firefly-44s63k?file=/src/temporary-drawer.js
https://mui.com/material-ui/api/dialog/
https://mui.com/material-ui/api/modal/
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 was having an accessibility issue when using Material-UI with React. Specifically when placing a Menu on a Drawer. Essentially the normal behaviour of a Menu is to highlight the top MenuItem. This behaviour is different if that menu is placed on a Material UI Drawer.
I have recreated the problem here using just the example Material-UI Menu and Drawer:
https://codesandbox.io/s/material-ui-menu-and-drawer-accessibility-issues-xjj3h?file=/src/App.js
The following images show the difference between the two menus when opened. I am using the chromevox extension while testing:
A normal menu when using chromevox to show accessability:
A menu when it is placed on a material UI drawer:
Would anyone be able to point out if this is an error in my code or if perhaps there are any workarounds? Was going to raise this as a new github issue but felt it was worth asking the question here first. :)
By default, the drawer enforces (so long as it is open) that focus stays within itself. So when the menu opens and grabs focus, the drawer notices that it lost focus and it grabs it back.
There are two options for fixing this:
You can turn off this drawer behavior by specifying the disableEnforceFocus prop (example here).
You can specify the disablePortal prop on the menu (example here). This will cause the menu to be a descendant of the drawer in the DOM (by default the menu uses portals and is added as a child of the <body> element), so the drawer will not try to "take back" the focus, because when focus is in the menu it will still be within the drawer.
I would recommend option 2 since the drawer's focus enforcement is generally a good thing from an accessibility standpoint.