Locale issues with TextField number

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

• On the very first rendering, TextField with number type always displays the number with the locale specified by the browser, no matter which locale is specified by the theme.
• On the first rerender, TextField changes to a locale where the decimal separator is the period. This is also regardless of the locale specified by the theme.

Expected Behavior 🤔

I’m assuming the locale specified by the theme should be used in priority so the application can enforce user-defined preferences, and then the browser’s locale if the theme does not specify one.

Steps to Reproduce 🕹

See reproduction on Codesandbox.

import React from "react";

import { TextField, createMuiTheme, ThemeProvider } from "@material-ui/core";
import { enUS, fr } from "@material-ui/core/locale";

const themeUS = createMuiTheme({}, enUS);
const themeFr = createMuiTheme({}, fr);

export default function App() {
  return (
    <div>
      <div>
      <ThemeProvider theme={themeUS}>
        <TextField label="enUS" type="number" value={0.49} />
      </ThemeProvider>
      <div>
      </div>
      <ThemeProvider theme={themeFr}>
        <TextField label="fr" type="number" value={0.49} />
      </ThemeProvider>
      </div>
      <div>
      <TextField label="none" type="number" value={0.49} />
      </div>
    </div>
  );
}

1. Set the browser’s locale to French: on the very first render only, 0.49 is displayed as 0,49, no matter which locale is specified by the theme.
2. Click any button on the spinbox: the display changes to 0.49.

Context 🔦

Definition of settings in scientific applications. The user may want to specify custom choices for locale of numbers.

Your Environment 🌎

Tech	Version
Material-UI	v4.10.1
React	v16.12.0
Browser	Firefox v77.0.1

[eps1lon]

I can’t reproduce it in Chrome. Firefox has another day where it utterly fails at devtools and dark mode theming so I can’t even see the textfields.

If the behavior is identical for native <input /> then we can’t do much about it. I guess this is another reason to not use type="number" and prefer type="text" inputMode="numeric"

[mdazy]

I confirm it appears to be working correctly with Chrome. I will double-check Edge but this looks more and more like the issue is rather in Firefox.

The text type + numeric inputMode version does work, but it implies we need to handle l10n on our own, and it doesn’t feature the spinbox.

At least we’re getting the correct value in props and callbacks anyway, so probably we can live with this minor bug for now. I think it’s safe to close this at this point.

Thanks.