I’m really confused on what’s going on with my code. I have a Menu, that has list of avatars, and then another button in list. The last button, is another menu, that pops up a TextField. For some reason in the Textfield, Ever keystroke is recorded in the input, except when I hit ‘a’. It automatically unfocuses. I’m not sure what’s going on. Any insight on what’s going wrong?
return (<div id={row.name + "-" + "div"}>
<IconButton className="hideAddIcon"
id={row.name + "-" + "basic-button"}
key={row.name + "-" + "icon"}
aria-haspopup="true"
aria-controls="basic-menu"
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
onClick={(e) => handleClick(e, row.name)}
>
<AddCircleOutlineIcon fontSize="medium" />
</IconButton>
<Menu
style={{
paddingBottom: '0px'
}}
id={row.name + '-menu'}
key={row.name + '-menu-icon'}
anchorEl={anchorEl && anchorEl[row.name]}
open={Boolean(anchorEl && anchorEl[row.name])}
onClose={handleClose}
MenuListProps={{
'aria-labelledby': 'basic-button',
}}
>
{
Array.from(selectionMenuData.keys()).map((key, index) => {
return <MenuItem key={row.name + '-' + index} value={row.name} style={{ maxHeight: '55px' }} onClick={(e) => addPersonToList(row, selectionMenuData.get(key))}>
{(() => {
switch (row.sourceType) {
case 'People':
return (
<ListItemAvatar>
<Image src={selectionMenuData.get(key).Avatar} className={classes.peopleMenuPicture} />
</ListItemAvatar>
);
case 'Seller Competition':
return (
<ListItemAvatar style={{
minWidth: '90px', display: 'flex',
justifyContent: 'center',
}}>
<Image src={selectionMenuData.get(key).Logo} />
</ListItemAvatar>
)
}
})()}
<ListItemText>{key}</ListItemText>
</MenuItem>
})
}
{(row.sourceType === 'People' || row.sourceType === 'Seller Competition') ?
<MenuItem key="addNewPersonMenu" onClick={(e) => secondMenuClick(e, 'addPerson')}>
<ListItemAvatar style={{
minWidth: '90px', display: 'flex',
justifyContent: 'center',
}} >
<AddCircleOutlineIcon sx={{ width: row.sourceType === 'Seller Competition' ? '53px' : '84px' }} />
</ListItemAvatar>
<ListItemText >
{menuText}
</ListItemText>
<Popover
id="add-person-menu"
anchorEl={anchorEl && anchorEl['addPerson']}
open={Boolean(anchorEl && anchorEl['addPerson'])}
onClose={(e) => handleCloseDialog(e)}
MenuListProps={{
'aria-labelledby': 'add-person-button',
}}
anchorOrigin={{
vertical: 'top',
horizontal: 'left',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'left',
}}
>
<div style={{ paddingLeft: 10, paddingRight: 10, width: '20em' }} tabIndex={0} >
<TextField id="outlined-basic" label="LinkedIn URL" id='add-person-name' autoFocus
variant="outlined" fullWidth autoComplete='off' type='text' name='linkedinUrl'
placeholder="Enter LinkedIn URL..." onKeyDown={(e) => submitNewPerson(e, row)} />
{/* <input type="text" id="submitPeople" name="addPeople"></input> */}
{console.log(anchorEl)}
</div>
</Popover>
</MenuItem> : <div>Not Added</div>
}
</Menu>
</div>)
}