Problem:

I'm making a custom keyboard display on a website because I wanted to add specific key features to it. Currently, there is a bug in my custom keyboard when if I have buttons x and y then I rapidly click from x -> y button it causes the y event click to call the same event as previous onClick which on this case is x and also vice versa.

This issue only seems to occur on ios mobile devices. so far I've only tested it on iPhone 8 and iPhone 12 Pro Max safari browsers but I'm suspecting it's an iOS thing.

Goal:

I want to prevent this issue from happening and still be able to rapidly to type with my custom keyboard. How can I fix this?

Attempts:

I have tried a few different approaches but none of them worked:

• separating the functions for both buttons
• adding keys into the buttons
• disabling the previously clicked button for 100ms-400ms

Sample Code:

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;

Sample image here