javascript - Form onSubmit works in desktop but not on mobile

Question

I've done my due diligence in researching this question and the most relevant post:

My React application will not put or post on submit on mobile phones but will work on desktop devices

Did not have any answers so I am asking pretty much the same question. I have a registration form which works fine on Desktop but will not submit on Mobile. I have added "cursor:pointer" to my CSS file for the custom button component but this has not solved the issue.

<form onSubmit={handleSubmit} autoComplete="off">
    ...
          
   <Button type="submit">Register Your Profile</Button>
</form>

My Custom Button Component:

export default function Button({
  children,
  disabled = false,
  type = 'button',
  onClick,
  isSecondary,
  className
}) {
  return (
    <button
      type={type}
      onClick={onClick}
      disabled={disabled}
      className={`${className} ${isSecondary ? '__rival_button_secondary' : '__rival_button'} `}
    >
      {children}
    </button>
  );
}

Again, the form can be submitted on Desktop just fine but not on mobile. How can we fix this? It appears the Button needs some kind of an onClick event handler but why is this the case for mobile only? The only relevant documentation I could find: https://github.com/facebook/create-react-app/issues/4290 does not address the mobile issue specifically.

I've tried adding onClick, onTouchStart to Button but this does not capture the form submit event. I've also tried adding an 'id' tag to the form but all to no avail.

question from:https://stackoverflow.com/questions/65850624/form-onsubmit-works-in-desktop-but-not-on-mobile

Answer 1

Waitting for answers