I would like to ask for help. How can I be able to render these menus under their correct and proper category menu? Currently, they would just pile against each other instead of rendering from their proper menu. I am using React together with TypeScript and I have been working for this nonstop and haven't found an answer. Hope someone could help.
This is a sample photo of the problem. They're all overlapping and rendering together instead of rendering it differently from the other menu.
This Message Menu would only render a Menu List drop down menu.
This Operation Menu would and should only render Ack, Unack, Clear, and Comment
Here's my source code.
const handleClick = (index: null, event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
};
<Menu
id="basic-menu"
anchorEl={anchorEl}
open={open}
onClose={handleClose}
MenuListProps={{
"aria-labelledby": "basic-button",
}}
>
{customtoolinfo.menu_sub.map((custommenusubtool: any) => (
<MenuItem onClick={handleClose}>
{custommenusubtool.menu_sub_name}
</MenuItem>
))}
</Menu>
The issue is because you have same anchorEl value of all sub menus. This issue can be fixed in many ways. One way is to have only one menu and render it's sub-menus based on condition or second way is to have different anchorEl state for every submenu and control them based on menu
Related
I'm stumped. I've done a number of Google searches as well as looked at react-select and Material UI Accordion docs. No one seems to have encountered this issue before, which surprises me, as these are very popular component libraries.
I've been using the <CreatableSelect> component on its own, no problem, with isSearchable and isMulti properties activated. Behavior is as expected. When I type in the box it auto-filters the dropdown list of options accordingly.
However, things get glitchy only when I put this component into the content pane of an MUI <Accordion> component: the typing action of the user after two characters causes the select widget to lose focus, the page scrolls to some unknown anchor point, and the user's typed text does not remain in the select box, and the dropdown list of options doesn't even appear. This glitch occurs even if there are only a small number of options (e.g. 5-10) in the options list.
Does anyone have any experience with the interactivity of these two components? Is there some component property toggle I am missing? I am guessing that the Accordion is responding to keystrokes in a way that is overriding the CreatableSelect's behavior.
import MuiAccordion from "#mui/material/Accordion";
import MuiAccordionSummary from "#mui/material/AccordionSummary";
import MuiAccordionDetails from "#mui/material/AccordionDetails";
import ExpandMoreIcon from "#mui/icons-material/ExpandMore";
import CreatableSelect from "react-select/creatable";
const FilterBox = ({.... various props .... }) => {
const Accordion = styled(MuiAccordion)(({ theme }) => ({
}));
const AccordionSummary = styled(MuiAccordionSummary)(({ theme }) => ({
}));
const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
}));
return (
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel-candidates-content"
id="panel-candidates-header"
>Search Items
</AccordionSummary>
<AccordionDetails>
<CreatableSelect
instanceId={label}
aria-label={label}
styles={selectCustomStyles}
options={showOptions}
isSearchable
isMulti
value={value}
filterOption={handleFilterOption} />
</AccordionDetails>
</Accordion>
)
}
Upon further investigation, I figured out that the problem is the styled() function from MUI legacy styling. When I switched over to the newer sx prop paradigm, the issue went away. I still have no idea why styled() would interfere with user interaction. But given that this approach is deprecated, I'm not going to bother to figure that out! Just switch over to MUI "system" and you're good to go.
I have same problem, but i used the Select from Material-UI. That problem appear when i set props disablePortal like "False" for Select. Just try use Select from Material-UI with portal or just portal.
<Select
MenuProps={{
disablePortal: true,
}}>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
I remade the simple popover example on this page except using mouse hover props:
https://codesandbox.io/s/eager-dewdney-yt3v-yt3vb
<Button
variant="contained"
onMouseEnter={e => setAnchorEl(e.currentTarget)}
// onMouseLeave={() => setAnchorEl(null)}
>
As soon as onMouseLeave is uncommented the above code sandbox will break silently. The UI will appear fine but the popover will not display. I have found the same to happen in my actual project.
Commenting onMouseLeave will at least allow onMouseEnter to work correctly with the popover, but it is then stuck on screen.
Am I not using onMouseLeave correctly here?
If it is being used correctly but appears to be a library related bug, what mouse based alternative could be used in place of onMouseLeave above?
I ran into the same issue, and I did not want to use a Tooltip.
The fix is to add a style to the popup to suppress the additional onMouseLeave() event that gets fired right after the popup opens:
<Popover
style={{ pointerEvents: 'none' }}
>
{children}
</Popover>
I found the fix here.
In currently working application we are using react material ui components to design a web page. And in one situation we have been using <List> material ui component as suggested in https://material-ui.com/demos/lists/ with few changes as per the application requirement. The scenario would be as below
And now when I click on CountryOne listiteam then all three listitem's getting expanded as below.
But it should not happen. Actual expectation is current clicked listitem only should get expanded and other two listitem's should be in collapsible state only.
I have tried something with index of map only while iterating list of objects but not been successful. Please have a look into my sample code here https://stackblitz.com/edit/react-oxmu9x
Per your example, the reason behind this is all three Countries are using the same open property. Try doing this and see if it works:
this.state = { open: {countryOne: false, countryTwo: false, countryThree: false}
handleCollapse = (val) => { this.setState(state => ({
open: Object.assign({}, state.open, {[val]: !state.open[val]})
}))}
// countries' ListItem onClick
onClick={() => handleCollapse('countryOne')}
onClick={() => handleCollapse('countryTwo')}
onClick={() => handleCollapse('countryThree')}
I need to make my site accessible. I'm using ant-design Menu, and the Menu.Submenu is not keyboard accessible, i believe. By adding tabindex i can tab to the submenu, but clicking ENTER nothing happens- the submenu doesn't open, i have no way of programatically openning it.
Under handleKeyPress i'm able to register the ENTER click event on the submenu title but i cant get the submenu to open and show the items. Is there functionality for that?
Perhaps there's a way and i'm missing something?
<Menu.SubMenu onKeyPress={(event) => this.handleKeyPress(event,
"EditYourProfileSubMenu")} onTitleClick={()=>{alert('title clicked')}}
tabIndex={0} title="Edit Your Profile" style={{ color: 'white' }}>
It would be very nice to have an entire Menu which is keyboard accessible, including navigation with arrows and automatic enter click triggers click events.
But i'll also be happy with a way to programatically open ant design SubMenu.
I'm still waiting for a better solution, maybe someone will reply to
https://github.com/ant-design/ant-design/issues/14356
I found a meantime hacky solution for this- using Menu's openKeys prop(see https://ant.design/components/menu/). It gets an array of submenu keys to determine which are open. So using onKeyDown i listened to these events and added/removed the right submenu key from the array (using State, of course).
<Menu
openKeys={this.controller.getMainMenuOpenKeys()}
...>
...
<Menu.SubMenu key={"EditYourProfileSubMenu"}
onKeyDown={(event) => this.handleKeyPress(event, "EditYourProfileSubMenu", true)}
onTitleClick={() => {
this.controller.setMainMenuOpenKeys(["EditYourProfileSubMenu"]) }} //sets the state which openKeys listens to
tabIndex={0}
title="Edit Your Profile" style={{ color: 'white' }}>
...
</Menu.SubMenu>
</Menu>
Adding openKeys field to menu messes with the mouse click flow, so i had to add onTitleClick and add the key to openKeys there also.
I'm currently having troubles with the material-ui drawer (https://material-ui-next.com/ one)
When I open the mini variant, the collapse inside my menu resets (closes because of the "remount").
However I would like them to persist their current state (open/closed).
Does Anyone know a way to achieve this?
The drawer:
<Drawer type="permanent"
classes={{paper: classNames(classes.drawerPaper, !this.state.open && classes.drawerPaperClose)}}
open={this.state.open}>
<div className={classNames(classes.drawerInner)}>
<Navigation updateTitle={this.updateTitle}/>
</div>
</Drawer>
The navigation component: https://pastebin.com/webdmLXp
Rendered with open collapse:
After clicking the burger button:
Sure Mr who I share my lastname with, you need to keep state of each <MenuItem>. Just add an onClick to each menuItem and toggle the state in your component. This does not really relate to Material-ui, but is more a general React question.