Decimal separator (.) not recognize on the Chrome Android phone

[amikem]

I am using MUI to build a component to capture currency. It works very good on my desktop. But with the mobile device (Android Chrome), the cursor is not moved to the decimal place when i press on the (.). My phone keyboard is having only the (.). I tested on desktop and saw that both (,) and (.) are moving the cursor to the decimal place.

Can you help? i am missing something?

const NumericFormatCustom = React.forwardRef<NumericFormatProps, CustomProps>(function NumericFormatCustom(props, ref) {
  const { onChange, ...other } = props

  return (
    <NumericFormat
      {...other}
      getInputRef={ref}
      onValueChange={values => {
        onChange({
          target: {
            name: props.name,
            value: values.value
          }
        })
      }}
      valueIsNumericString
    />
  )
})

const FormCurrencyField = (props: FormCurrencyFieldProps) => {
  const { fieldName, fieldLabel, required, allowNegative = false, decimalScale = 2 } = props
  const {
    control,
    formState: { errors }
  } = useFormContext()
  const settings = useSelector((state: RootState) => state.organization.settings)
  const { currency = '', symbol } = settings

  return (
    <FormControl fullWidth>
      <Controller
        name={fieldName}
        control={control}
        rules={{ required: required }}
        render={({ field: { value, onChange } }) => (
          <TextField
            value={value}
            label={fieldLabel}
            onChange={onChange}
            error={Boolean(errors[fieldName])}
            aria-describedby={'validation-' + fieldName + '-name'}
            InputProps={{
              endAdornment: (
                <InputAdornment position='end'>
                  <Tooltip title={currency}>
                    <span>{symbol}</span>
                  </Tooltip>
                </InputAdornment>
              ),
              inputComponent: NumericFormatCustom as any,
              inputProps: {
                name: fieldName,
                onChange: onChange,
                allowNegative: allowNegative,
                decimalScale: decimalScale,
                thousandSeparator: '.',
                decimalSeparator: ',',
                fixedDecimalScale: true //If set to true, it adds trailing 0s after decimalSeparator to match given decimalScale.
              }
            }}
          />
        )}
      />
 
    </FormControl>
  )}

[afonja14755]

Same problem. When I set thousandSeparator: '.' and decimalSeparator: ',', the input mask breaks. Any updates on this? This was basic functionality — why isn't it prioritized as critical?