0
179
ViewsClicking up arrow on a react IMask number input breaks on safari
I have an integer input using react-imask, which works fine on google chrome. However on safari, when I click the arrows without focusing on the input first, (say from 10 to 11), it will add the new value to the start of the input i.e 1110.
These are my props being passed in:
<InputInteger
required={true}
className={"w-[65px] text-center"}
min={0}
value={updatedStock}
onChange={(e) => setUpdatedStock(parseInt(e.target.value))}
/>and this is the InputInteger component:
<IMaskInput
{...props}
mask={Number}
scale={0}
lazy={false}
min={props.min ?? 0}
max={props.max ?? 9999}
radix={"."}
signed={false}
mapToRadix={[","]}
inputMode={"numeric"}
value={props?.value?.toString()}
onAccept={(value) => {
if (!props.onChange) return;
if (value === "0" && !props?.required) value = "";
const payload = { target: { value: value } };
return props.onChange(payload);
}}
onChange={undefined}
/>
As mentioned, this only seems to be an issue on safari.
·
Juan Pablo Isaza
Answer question