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:

[neehhaa06]

Hello!! @vlzuiev :)

To fix the issue where invalid input values cause the label to overlay incorrectly, you can reset the input value in the onBlur event.

import React, { useRef } from 'react';
import { NumberInput } from 'react-admin';

const ReactAdminNumberInput = () => {
  const inputRef = useRef(null);

  const handleBlur = (e) => {
    const value = e.currentTarget.value;
    if (!value || isNaN(value)) {
      if (inputRef.current) {
        inputRef.current.value = '';
      }
    }
  };

  return (
    <NumberInput
      inputRef={inputRef}
      label="Label text"
      source="anysource"
      InputProps={{
        onBlur: handleBlur,
      }}
    />
  );
};

export default ReactAdminNumberInput;

handleBlur Function: Clears the input field if the value is empty or not a number.

inputRef: Used to directly manipulate the input value.