I am implementing the Autocomplete material ui widget in my webApp, but the drop down is rendering behind my edit panel. I can use my arrow keys to select options, but I can't see the pop up. If I remove either of the following css property {position: "fixed"} or {"z-index": "2000"} it works, but my edit panel will no longer look correct. So it seems that I need to be able to set the zindex of the drop down to 2001 or some thing, but i am unsure as to how or if this is the best solution.
Also I am trying to set the initial value of the dropdown box to "ACCU-SEAL 35-532 Bag Sealer" but get the following error:
Material-UI: the 'getOptionLabel' method of Autocomplete returned undefined instead of a string for "ACCU-SEAL 35-532 Bag Sealer".
so I tried to add the following to my Autocomplete:
getOptionSelected={(option, value) => option.label === value}
but I get the same error.
I have an example of my code up here:
https://codesandbox.io/s/material-demo-fv075?file=/formElementsEdit.jsx
You can use the disablePortal prop to make sure that the menu will be rendered under the current node:
<Autocomplete
....
disablePortal
....
/>
Related
I'm using MUIv4 and built the following table component which show some actions on hover.
UI Before Hover
UI After Hover
Now I want to shift to MUI v5 Datagrid to replace this component. But could not find anything that could fulfill my design need i.e show actions on hover. Is there any way to do this on Datagrid component?
Link of MUI5 DataGrid with somehow desire result
Note: I want to show the action on one row at a time like in gmail
Just give me the code: https://codesandbox.io/s/datagridprodemo-material-demo-forked-63c9j?file=/demo.js:699-864
You can use renderCell with Chip like this:
renderCell: (params) => {
return (
<Chip variant="outlined" size="small" label={params.value} />
);
}
As you are requiring some GMail like interface try setting the icon property of Chip. Reference: https://github.com/mui-org/material-ui/blob/v5.3.0/docs/src/pages/components/chips/IconChips.js
And it looks something like this:
You could check this documentation about migration from v4 to v5 https://mui.com/components/data-grid/migration-v4/#removed-props.
There are some removed props related to hover event: onCellEnter, onCellLeave, onRowEnter, and onRowLeave. The developer said that they removed the props for better performance https://github.com/mui-org/material-ui-x/issues/3799.
You could also check this documentation https://mui.com/components/data-grid/components/#row for the implementation examples when the mouse cursor enters or leaves the row or this documentation https://mui.com/components/data-grid/components/#cell when the mouse cursor enters or leaves the cell.
here is the image of my codeI'm building a Twitter like app and i'm trying to build the 'Like' menu at the bottom of every tweet.
at the moment the 'Like' is a button and i want to change it's color once pressed.
the obvious problem is that all the other tweets 'likes' buttons are changing too..
i've tried everything i can using useState hooks and nothing worked..
any ideas?
What I would do is, I would store the liked info inside the item. So when you add like, you can change item.liked = true or item.liked = false
And once you do that you can style based on the item's liked field:
<button style={{backgroundColor: item.liked ? 'red' : ''}} ...
I'm using Material-UI Popper component and using it with its keepMounted prop set.
The issue I'm having is that when the Popper's component open prop is false the popper goes of out of the window boundaries but remain visible.
Q: What approach should I use to ensure that the popper is not visibled/displayed when the Popper component's open is false?
I've looked into it (see below for more details) but without success.
I've setup a small repro and example code here:
https://codesandbox.io/embed/389w75jpom
Scroll to the bottom when the tooltip/popper "isn't shown" and notice that it's still visible. Clicking the button toggles the value of the Popper component's open property.
I'm hoping for the popper to be hidden when open is false while still using keepMounted. I would prefer if it wouldn't be shown at all (e.g display: none) not just go out of sight.
From Material-UI docs, I’ve seen that popper.js modifiers can be passed using the modifiers prop and look at modifiers~hide specifically.
In the doc it's mentioned that the hide modifier:
[...] will set a x-out-of-boundaries attribute which can be used to hide with a CSS selector the popper when its reference is out of boundaries.
As per the doc this modifier should be enabled by default but it seems that the x-out-of-boundaries attribute doesn't seem to be applied to the popper container div at all.
So I haven't been able to rely on a CSS selector in this case.
I've also found this GH issue that I believe led to the implementation of the hide modifier.
I've tried to pass down [1] to the modifier a hidePopper function similar to the one suggested in the same GH issue here to detect when the popper goes in and out of the boundaries and set its style accordingly. Here's a fork of the previous repro with the code updated to reflect this:
https://codesandbox.io/embed/jvr6oy95j3
But the boundaries attribute is not present on the data object passed to the function (see the console logs) when testing here:
https://jvr6oy95j3.codesandbox.io/
Sorry if I'm missing something and would really appreciate any guidance on this. Thanks
[1] via the hide.fn modifier attribute.
Is there a way to show why an option is disabled when I use react-select ?
Something like a disabledReason property in the option object ?
Assuming you want to show the reason alongside the disabled option in the menu, you can override how the option is rendered to render in a way that includes the reason.
How to do this exactly with the react-select API depends on if you are using V1 or V2 of react-select.
Example for V1: https://github.com/JedWatson/react-select/blob/v1.x/examples/src/components/CustomComponents.js
Docs for V2: https://react-select.com/props#replacing-components
One possible solution is
Use react's SyntheticEvent onMouseEnter on the react-selection component to check if mouse hover.
Check if the react-select components is disabled
If the react-select is disabled, show the a tooltip
In React, onMouseEnter or hover is not working as expected
https://reactjs.org/docs/events.html#mouse-events
tooltip div with ReactJS
New to React and MUI, and having a UX issue where when we have a popover (dropdown menu, or autoselect dropdown) we can still scroll the main body of the site. I see that its fixed in the new beta V1 for MUI, but using the current stable release, Ive been asked to see if we can hack it up to stop the scrolling - but I cant seem to target/catch anything when we have a popover appear.
Examples: Current MUI - http://www.material-ui.com/#/components/auto-complete
V1 Beta MUI - https://material-ui-next.com/demos/autocomplete/
So, if you were to input something in those examples and trigger the downdown/popover, youll see that in the current MUI, you can still scroll the
I was hoping someone may have had this issue and had a solution they'd like to share?
Thanks guys!
I had a similar problem and solve it using 'disablePortal' Autocomplete property:
You can take a look at 'disablePortal' definition in here:
https://material-ui.com/api/autocomplete/#props
disablePortal: Disable the portal behavior. The children stay within it's parent DOM hierarchy.
I also had to add some styles to get pop up get positioned relative to input component.
Here is some sort of example:
const useStyles = makeStyles({
popperDisablePortal: {
position: 'relative',
}
})
const classes = useStyles()
<Autocomplete
classes={classes}
disablePortal={true}
{...props}
/>
So you may have to:
set up disablePortal property
define associated popperDisablePortal style with 'relative' position
EDIT: actually this error should not happen as part of default MUI Autocomplete set up. In my case, the error was some conflicting CSS property that was generating this scroller bug. Not sure in your case, but to me it happens to be some overflow: auto property defined on page HTML tag (sometimes you can find it on body tag). Replace with overflow: 'visible' and scrolling error should be gone without even changing one line of autocomplete component definition.