NumberInput fails to parse not a number input value and which causes input label overlaying non existing value

[vlzuiev]

What you were expecting: When parsing on an input field fails, the value in the shadow element of an input is also removed.

What happened instead: When parsing on an input field fails, the value in the shadow element exists and is shown on the UI. The input value doesn't have any value and the input label overlays the shadow element of the input.

Steps to reproduce: Navigate to any number input component and try to add a nonexisting value like "5." in Chome and any letters in Firefox like "asd". You can navigate to demo react-admin page like this one: https://marmelab.com/react-admin-demo/#/products/124/details and change any number input field.

The workaround we've implemented is to reset the input reference value when the event value is empty.

const inputRef = useRef(null);

const ReactAdminNumberInput = () => {
  return (
    <NumberInput
      inputRef={inputRef}
      label="Label text"
      source="anysource"
      InputProps={{
        onBlur: (e) => {
          if (!e.currentTarget.value && inputRef.current) {
            inputRef.current.value = '';
          }
        }
      }}
    />
  );
};

Environment

• React-admin version: 4.11.0
• React version: 18.0.0
• Browser: Chrome, Arc, Firefox (didn't test others)

https://github.com/user-attachments/assets/0223905d-3159-4cbb-a58e-db8d1719f8c5

[adguernier]

Reproduced, thanks. Feel free to open a PR, any contribution is welcome :+1:

[djhi]

This is known issue with MUI https://mui.com/material-ui/react-text-field/#shrink

[fzaninotto]

As explained in the comment above, this is a known MUI issue that can't be fixed in react-admin. The workaround they suggest are:

• use a TextInput instead of NumberInput
• Force the shrink text of the label.

All these workarounds can be achieved in user land, so we won't fix this bug in react-admin.