Problema:

Estoy creando una pantalla de teclado personalizada en un sitio web porque quería agregarle funciones clave específicas. Actualmente, hay un error en mi teclado personalizado cuando, si tengo los botones x e y , hago clic rápidamente desde el botón x -> y , hace que el evento y haga clic para llamar al same event as previous onClick que en este caso es x y también viceversa.

Este problema solo parece ocurrir en dispositivos móviles ios. Hasta ahora solo lo he probado en safari browsers de iPhone 8 y iPhone 12 Pro Max , pero sospecho que es algo de iOS.

Meta:

Quiero evitar que suceda este problema y aún poder escribir rápidamente con mi teclado personalizado. ¿Cómo puedo arreglar esto?

Intentos:

He intentado algunos enfoques diferentes, pero ninguno de ellos funcionó:

• separando las funciones de ambos botones
• agregar teclas en los botones
• deshabilitar el botón previamente presionado por 100ms-400ms

Código de muestra:

 import React, {useState} from 'react'; const spacingStyle = { fontSize: '14px', marginBottom: '10px', } const buttonStyle = { background: 'gray', color: 'White', marginRight: '5px', padding: '0 10px', } const Test = () => { const [content, setContent] = useState(''); const [clicked, setClicked] = useState(''); const appendToText = (e, char) => { setContent(content + char); setClicked(e.target.innerText); }; return ( <> <p style={spacingStyle}>Content: {content}</p> <p style={spacingStyle}>Clicked: {clicked}</p> <button key="key-x" style={buttonStyle} onClick={(e) => appendToText(e, 'x')}>X</button> <button key="key-y" style={buttonStyle} onClick={(e) => appendToText(e, 'y')}>Y</button> </> ); }; export default Test;

Imagen de muestra aquí