Why 1st menu item selected by default at MenuAppBar - reactjs

Question

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.

Answer 1

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.