Joan Jorda Molto
Joan Jorda Molto

Reputation: 1

Can't type a comma , in <input type="number"> on Samsung tablets

I'm developing a React application that includes a form with an <input type="number"\>. It works fine on most devices, but on Samsung tablets with the default keyboard, I can't enter a comma (,) for decimal values.

Here’s my input code:

<input
  type="number"
  min="0.01"
  className="textInputPVP"
  value={producto.PVP}
  onChange={(e) =>
    actualizarProducto(producto.uniqueId, "PVP", + e.target.value)
  }
  onFocus={handleFocus}
/>

What happens?

What I tried:

<input
    type="tel"
    inputMode="decimal"
    className="textInputPVP"
    value={producto.PVP}
    onChange={(e) =\> {
    let value = e.target.value.replace(".", ",");
    if (value === "" || isNaN(+value)) return;
    actualizarProducto(producto.uniqueId, "PVP", +value);
    }}
    onFocus={handleFocus}
/\>

Solution I found:

After some testing, I realized the issue is specific to the Samsung default keyboard. Simply installing and using Gboard solves the problem immediately without any code changes.

Upvotes: 0

Views: 64

Answers (2)

user1039663
user1039663

Reputation: 1335

Quickest fix: probably try directly HTML lang attribute: what is the role of the locale? (but only temporal and try it well on other devices, while you implement a long run fix).

And for the long run...

I think that for solving this kind of issue and many others you should:

  1. offer a configuration screen which on some section allow users to enable various options for fixing this kind of issues,
  2. or even better, try to detect the issue automatically and show a floating mini dialog sugesting the user to enable the fix. Both if you detect the problem via user-agent signature or thru user's strange behaviour. I'd show always 3 options on these floatings: a. enable fix b. contact for feedback and c. close this dialog.
  3. implement the fix itself: can be the simply HTML lang attribute: what is the role of the locale? thing or maybe something more radical like downgrading all numeric inputs into text inputs (maybe with character restriction into them).

About previous answer: requiring the users to install an 3rd party app, even being from google is probably a very bad idea, even if they are only less than a hundred): can be very problematic, time consuming and even potential legal problems issue... you know if you talk to near any client service department anytime soon.

Upvotes: 0

Joan Jorda Molto
Joan Jorda Molto

Reputation: 1

The issue comes from the Samsung default keyboard, which disables the comma (,) in <input type="number">.

✅ Quickest Solution: Simply install and use Gboard instead of the Samsung keyboard. This fixes the issue immediately.

Upvotes: -1

Related Questions