I am trying to write a react component to render a menu, but I need to use just CSS for controlling the visibility, but I have a problem that I cannot able to solve.
I have set a hover on the element with the class menu, then it set the child called wrapSubMenu to visible but it is setting all menu's children. I pretend to Do it just on the first wrapSubMenu of the menu.
Playground here
They have the same class style, you cannot complete that on this way.
Try to do it with state toggling on hover, instead of css
Related
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'm trying to do toggle drawer and resize of it together using React JS and Material UI. The reference code is in class based component at
https://stackblitz.com/edit/react-2h1g6x?file=ResponsiveDrawer.js
I'm trying to do similarly using function based components and hooks and the codesandbox link is below:
https://codesandbox.io/s/resizeeee-ilot8?file=/src/App.js
But this is not working properly. Initially on toggle the drawer expands and on toggle again it collapses which is fine. But the issue starts when I toggle the drawer and trying to resize it. The width of the drawer changes continuously with mousemove on both outside of drawer and inside of drawer. I understood that my state is changing continuously and so mousemove. Is there any way to restrict this and let it work similarly to the class based component. Any help is much appreciated. Thanks!
Change condition on line number 97
if (!state.isResizing || !open)
just change "&&" to "||"
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.
I have a component that contains an md-autocomplete. This component is essentially being used as a searchable select list.
So, I'd like to change the icon of the clear-button from the 'X' to a down arrow.
I've tried the solution mentioned here, but that doesn't work for me, because I need the button to remain clickable.
Is there a way I can override the button styling in the component's CSS to specify a different icon to be used?