How to Fix focus background color on Ipad or mobile devices with React and Material io

Question

I have my custom button with my background and a :hover color, on the web it works fine, but on mobile devices, after clicking the button, it keeps the color of the :hover even when the mouse is not over that button .

I want to find a way to correct this error because the button keeps :focus css media with the same attributes as :hover

import MaterialButton from '@material-ui/core/Button';

export const Button = ({ title, className, style, onClick, disabled, type }: Props) => {
  return (
    <MaterialButton
      ref={buttonRef}
      type={type}
      className={className}
      style={style}
      onClick={onClick}
      disabled={disabled}
    >
      {title}
    </MaterialButton>
  );
};

I believe this has been answered here: https://stackoverflow.com/a/22560108/7506259 — A McBride, Dec 05 '20 at 15:50
will using `:active` pseudo-class solve your issue? As, `:active` style only appear on clicking of the button — Rajiv, Dec 06 '20 at 02:34

score 0 · Accepted Answer · answered Dec 30 '20 at 16:48

I added this code to fix the problem on mobile devices. I get the original color of the button and if it is mobile I will replace the color with the original.

useEffect(() => {
    const originalClass = document.querySelector<any>(`.${className}`);
    if (originalClass) {
      const originalStyle = getComputedStyle(originalClass);
      setOriginalBackground(originalStyle.backgroundColor);
    }
  }, [className]);

  /**
   * This function fix the color bug with :hover and :focus on mobile devices.
   */
  const updateBackgroundColor = () => {
    if (!isMobile) return;

    try {
      document.querySelector<any>(`.${className}:hover`).style.backgroundColor = originalBackground;
    } catch (error) {
      console.error(error);
    }
  }

  const onClickEvent = (event: any) => {
    updateBackgroundColor();
    onClick(event);
  }

How to Fix focus background color on Ipad or mobile devices with React and Material io

1 Answers1