Reputation: 1
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}
/>
The Samsung keyboard does not show the comma (,
), making it impossible to enter decimal numbers in locales where the comma is the standard separator.
It works fine on IOS and other keyboards.
Using inputMode="decimal"
to force a numeric keyboard.
Changing type="number"
to type="text"
and validating the input manually.
A significant changing like this:
<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}
/\>
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
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:
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
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