OnClick not working in React JS on mobile

Question

When verifying the signature (see demo video), onClick does not fire the onSet() function on tablet/mobile, but works on computer. On tablet/mobile, onClick only works outside the button.

I want the onClick function to trigger on tablets/mobile devices.

Demo video: https://streamable.com/lujzg0

Project: https://hh8n2j.csb.app/ (Sandbox)

DraggableSignature:

 //DraggableSignature.js
    import Draggable from "react-draggable";
    import { FaCheck, FaTimes } from "react-icons/fa";
    import { errorColor, goodColor, primary45 } from "../utils/colors";

    export default function DraggableSignature({ url, onEnd, onSet, onCancel }) {
      const styles = {
        container: {
          position: "absolute",
          zIndex: 100000,
          border: `2px solid ${primary45}`,
        },
        controls: {
          position: "absolute",
          right: 0,
          display: "inline-block",
          backgroundColor: primary45,
          // borderRadius: 4,
        },
        smallButton: {
          display: "inline-block",
          cursor: "pointer",
          padding: 4,
        },
      };
      return (
        <Draggable onStop={onEnd}>
          <div style={styles.container}>
            <div style={styles.controls}>
              <button style={styles.smallbutton} onClick={onSet}>
                <FaCheck color={goodColor} />
              </button>
              <button style={styles.smallbutton} onClick={onCancel}>
                <FaTimes color={errorColor} />
              </button>
            </div>
            <img
              alt="signature"
              src={url}
              width={200}
              style={styles.img}
              draggable={false}
            />
          </div>
        </Draggable>
        
      );
    }

App.js：

{signatureURL ? (
                <DraggableSignature
                  url={signatureURL}
                  onCancel={() => {
                    setSignatureURL(null);
                  }}
                  onSet={async () => {
                    const { originalHeight, originalWidth } = pageDetails;
                    const scale =
                      originalWidth / documentRef.current.clientWidth;

                    const y =
                      documentRef.current.clientHeight -
                      (position.y -
                        position.offsetY  
                        64 -
                        documentRef.current.offsetTop);
                    const x =
                      position.x -
                      160 -
                      position.offsetX -
                      documentRef.current.offsetLeft;

                    // new XY in relation to actual document size
                    const newY =
                      (y * originalHeight) / documentRef.current.clientHeight;
                    const newX =
                      (x * originalWidth) / documentRef.current.clientWidth;

                    const pdfDoc = await PDFDocument.load(pdf);

                    const pages = pdfDoc.getPages();
                    const firstPage = pages[pageNum];

                    const pngImage = await pdfDoc.embedPng(signatureURL);
                    const pngDims = pngImage.scale(scale * 0.3);

                    firstPage.drawImage(pngImage, {
                      x: newX,
                      y: newY,
                      width: pngDims.width,
                      height: pngDims.height,
                    });

                    if (autoDate) {
                      firstPage.drawText(
                        `Signé électroniquement le :${dayjs().format(
                          "DD/MM/YYYY à HH:mm:ss"
                        )}`,
                        {
                          x: newX,
                          y: newY - 10,
                          size: 14 * scale,
                          color: rgb(0.074, 0.545, 0.262),
                        }
                      );
                    }

                    const pdfBytes = await pdfDoc.save();
                    const blob = new Blob([newUint8Array(pdfBytes)]);

                    const URL = await blobToURL(blob);
                    setPdf(URL);
                    setPosition(null);
                    setSignatureURL(null);
                  }}
                  onEnd={setPosition}
                />
              ) : null}

Thank you

I changed onClick to onTouchtart, I changed the button position, I used another CSS library.

Answer 1

Try adding onTouchStart event and change the button to a div component and set its style to button style