Tengo una mesa con un icono de kebab. Cuando el usuario hace clic en ese icono, aparece una ventana emergente (eliminar formulario). Por lo que desplaza el contenido hacia la izquierda. Este comportamiento solo se observa en iPad y pantallas pequeñas. Mientras que en el escritorio funciona bien.

Aquí está el comportamiento observado. cuando hacemos clic en el ícono de kebab, aparece el menú desplegable para eliminar.

cuando se vuelve a hacer clic en el icono de kebab, la tabla se desplaza hacia la izquierda y cierra el menú desplegable

Aquí hay un fragmento a continuación.

Hay un controlador onClick en el icono. El controlador onClick solo establece la identificación y solo muestra/oculta el menú desplegable en función de la identificación seleccionada.

 <table style={{overflowY: 'auto'}}> {...table contents...} <iris-icon-only type="more-vertical" size="13" className="dropbtn" style={{ cursor: "pointer" }} onClick={() => setSelectedRowId(id)} data-test="kebabicon" ></iris-icon-only> {selectedRowId == id && ( <DropDown data-test="deletedropdown" style={toDeleteFormStatus[selectedStatus].styles} label={InReviewStatus[selectedStatus]} /> )}