CODEWITHSUNDEEP
reactjsmaterial-ui
Abdulrhman Alsri
Abdulrhman Alsri

Reputation: 1727

Why 1st menu item selected by default at MenuAppBar

In this menuAppBar the first item in the menu is selected by default. Where in this menu the first item is not selected by default, and that what I want is the same to be in the manuAppBar menu.

Upvotes: 1

Views: 1700

Answers (1)

Ken Gregory
Ken Gregory

Reputation: 7390

The first example is implemented with the material-ui Menu component and the second example is implemented using components from the react-popper library.

In the first example, the first item is highlighted because it has focus. This is because Menu sets focus if it is open when mounted or updated. Take a look at the source:

class Menu extends React.Component {
  componentDidMount() {
    if (this.props.open) {
      this.focus();
    }
  }

  componentDidUpdate(prevProps) {
    if (!prevProps.open && this.props.open) {
      // Needs to refocus as when a menu is rendered into another Modal,
      // the first modal might change the focus to prevent any leak.
      this.focus();
    }
  }

If you prefer react-popper and would like to use it in an AppBar, you can:

<AppBar position="static">
  <Toolbar>
    <IconButton className={classes.menuButton} color="contrast" aria-label="Menu">
      <MenuIcon />
    </IconButton>
    <Typography type="title" color="inherit" className={classes.flex}>
      Title
    </Typography>
    {auth && (
      <Manager>
        <Target>
          <IconButton
            aria-owns={open ? 'menu-list' : null}
            aria-haspopup="true"
            onClick={this.handleMenu}
            color="contrast"
          >
            <AccountCircle />
          </IconButton>
        </Target>
        <Popper
          placement="top-right"
          eventsEnabled={open}
          className={classNames({ [classes.popperClose]: !open })}
        >
          <ClickAwayListener onClickAway={this.handleClose}>
            <Grow in={open} id="menu-list" style={{ transformOrigin: '0 0 0' }}>
              <Paper>
                <MenuList role="menu">
                  <MenuItem onClick={this.handleClose}>Profile</MenuItem>
                  <MenuItem onClick={this.handleClose}>My account</MenuItem>
                  <MenuItem onClick={this.handleClose}>Logout</MenuItem>
                </MenuList>
              </Paper>
            </Grow>
          </ClickAwayListener>
        </Popper>
      </Manager>
    )}
  </Toolbar>
</AppBar>

Here is a mashup of your two cited examples on codesandbox. It needs work and was only added here to illustrate react-popper as a possibility.

Upvotes: 2

Related Questions