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.
Related
I am using React Native with Expo and i am attempting to use Gorhom's Bottom Sheet component to display a bottom sheet when a user clicks on a button. Everything works fine except the bottom sheet insists to always pop up on screen mount, which is obviously bad, it should only pop up when user clicks on a trigger like a button.
Here's my component:
import BottomSheet, { BottomSheetScrollView } from '#gorhom/bottom-sheet'
<BottomSheet
ref={sheetRef}
enableOverDrag
handleIndicatorStyle={styles.handleIndicator}
snapPoints={snapPoints}
enablePanDownToClose
>
<BottomSheetScrollView>
{children}
</BottomSheetScrollView>
</BottomSheet>
I've tried to toggle a display none/flex but that makes the popup not smooth and very sudden:
containerStyle={[styles.container, {display: showSheet ? 'flex' : 'none'}]}
I've went through the entire docs twice but found nothing that can help me.
If the expected behavior is to only show the bottom sheet when the user clicks a button, then it's looking more like a modal. There's the BottomSheetModal wrapper/decorator for that.
Instead of importing BottomSheet, import BottomSheetModal. Then get its reference and call the methods bottomSheetRef.current.present() and bottomSheetRef.current.close(). Doing it this way, all the show/hide up/down animations will work right off the bet.
Take a look at the documentation for a full example.
With MUI 5.0.2, When all the IconButton-s in a ButtonGroup go on the same side, the hover background shape will change.
And other elements also affects this (a Button with/without href property on one side)
It is said in another question by #Ryan Cogswell, that the styling for the border is using :not(:last-of-type) in the selector. This implies that MUI is using class on and , which seemes very slopy to me.
Is this is a bug?
I hosted a minimal environment with GitHub Pages. The question is shown on the first and forth chapter.
(all pictures shown here are showing with on hover)
Button with href
Button without href
Button without href on hover
Also I made a related issue on official repo, and in my Learning note
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 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.