Estoy usando el menú MUI para abrir y cerrar el menú al hacer clic en la selección de perfil, el problema es que si habilita la "barra de desplazamiento" en la configuración de la computadora y hace clic en el icono, se desplaza hacia la izquierda en el tamaño de la barra de desplazamiento.
¿Alguna idea de cómo detener este comportamiento de "salto" al hacer clic en el ícono de Menú?
¡Gracias!
Antes de abrir el menú Después de abrir
Eso es lo que tengo en el archivo .tsx:
<> <button ref={anchorRef} className={styles.LogoutButton} aria-controls={'menu'} onClick={handleOpenAccount}> <AssignmentIndOutlinedIcon style={{ width: 28, height: 28, color: Colors.Grey700 }}/> </button> <Menu id={'menu'} anchorEl={anchorRef.current} open={Boolean(openMenu)} onClose={handleCloseAccount} > <div className={styles.container}> <MenuList className={styles.nameField}>{`${user?.firstName} ${user?.lastName}`}</MenuList> <MenuList className={styles.emailField}>{user?.email}</MenuList> <Divider className={styles.divider} variant={'fullWidth'}/> <MenuItem className={styles.menuItem} onClick={redirectToUserAccount}> <Text className={styles.text}>{strings.view_account}</Text> </MenuItem> <MenuItem className={styles.menuItem} onClick={logoutClick}> <Text className={styles.text}>{strings.log_out}</Text> </MenuItem> </div> </Menu> </>y CSS:
.container { padding: p.$SPACING p.$SPACING * 1.5 p.$SPACING p.$SPACING * 3; text-align: end; .nameField { margin-top: p.$SPACING * 1.5; font-size: large; } .emailField { color: p.$GREY; margin-top: p.$SPACING; font-size: medium; } .divider { margin-top: p.$SPACING * 2; margin-bottom: p.$SPACING; } .menuItem { padding-right: 5px; border-radius: 5px; justify-content: flex-end; .text { line-height: p.$SPACING * 2; } } }