NumericFormat: customInput Antd Input is not working properly

[C3maLi]

Describe the issue and the actual behavior

I use NumericFormat format and customize the customInput property with antd Input. When used this way, input events do not work correctly.

Describe the expected behavior

I expect the values entered into the input to format and work correctly.

Provide a CodeSandbox link illustrating the issue

https://stackblitz.com/edit/react-m9nrou

Provide steps to reproduce this issue

An example is available on CodesandBox.

Please check the browsers where the issue is seen

• [x] Chrome
• [ ] Chrome (Android)
• [x] Safari (OSX)
• [x] Safari (iOS)
• [x] Firefox
• [ ] Firefox (Android)

[RezaGhx]

any updates?

[C3maLi]

any updates?

There are no updates available at the moment. I reported the same problem on the GitHub page of the Ant Design (Antd) library and am waiting for the response from there. Other than that, I'm trying to find another alternative way to solve the problem.

[sercangurbuz]

Working fine with antd 5.11 but begin to malfunction from 5.12 on

[RezaGhx]

ok I'll check it out with a downgrade.

[vagnerfpaes]

I faced the same issue. Instead of reverting to the previous version of Antd, I applied a temporary workaround to my component. For example, based on the code you provided in CodeSandbox:

import { Input, theme } from "antd";
import { NumericFormat } from "react-number-format";
import { TextField } from "@mui/material";

export default function AppInput(props) {
  const { hashId } = theme.useToken();
  return (
    <div className="App">
      <div>
        Antd Input
        <p>
          <Input hidden />
          <NumericFormat
            decimalSeparator=","
            thousandSeparator="."
            suffix={"₺"}
            decimalScale={2}
            fixedDecimalScale={true}
            style={{ width: 200 }}
            className={`ant-input ant-input-outlined ${hashId} ${
              props["aria-invalid"] == "true" ? "ant-input-status-error" : ""
            }`}
          />
        </p>
      </div>
      <br />
      <br />
      <div>
        Material Input
        <p>
          <NumericFormat
            decimalSeparator=","
            thousandSeparator="."
            suffix={"₺"}
            decimalScale={2}
            fixedDecimalScale={true}
            customInput={TextField}
          />
        </p>
      </div>
    </div>
  );
}

[RezaGhx]

any updates?

There are no updates available at the moment. I reported the same problem on the GitHub page of the Ant Design (Antd) library and am waiting for the response from there. Other than that, I'm trying to find another alternative way to solve the problem.

Can you mention your reported issue on Antd's?

[C3maLi]

any updates?

There are no updates available at the moment. I reported the same problem on the GitHub page of the Ant Design (Antd) library and am waiting for the response from there. Other than that, I'm trying to find another alternative way to solve the problem.

Can you mention your reported issue on Antd's?

I opened an issue like this https://github.com/ant-design/ant-design/issues/46999

[C3maLi]

working fine and implemented with react-hook-form

import { Input, InputProps } from 'antd';
import { useController } from 'react-hook-form';
import { NumericFormat } from 'react-number-format';

interface IProps {
  name?: string;
  handleChange?: (value: number | undefined) => void;
  status?: 'error' | undefined;
  disabled?: boolean;
  allowNegative?: boolean;
  suffix?: string;
  decimalScale?: number;
  decimalSeparator?: string;
  thousandSeparator?: string;
  allowedDecimalSeparators?: [];
  inputProps?: InputProps;
}

export const FieldNumber = ({ name = '', handleChange, ...restProps }: IProps) => {
  const { field } = useController({
    name: name,
  });

  return (
    <NumericFormat
      allowNegative={false}
      decimalScale={2}
      fixedDecimalScale={true}
      thousandSeparator={' '}
      decimalSeparator={','}
      {...restProps}
      value={field.value as number}
      onValueChange={(values) => {
        field.onChange(values.floatValue);

        if (typeof handleChange === 'function') {
          handleChange(values.floatValue);
        }
      }}
      customInput={Input}
    />
  );
};

However, this solution is a temporary one. The problem works fine in version 5.10.3 of Ant Design. In other words, the problem is actually caused by a conflict on the part of Ant Design. If the Ant Design team fixes this conflict, there will be no need for this temporary solution.

[C3maLi]

I created a temporary solution, maybe it will be useful to you I will try to find a solution for this issue later.

@sercangurbuz, @vagnerfpaes, @RezaGhx, @Yankovsky

https://stackblitz.com/edit/react-m9nrou-by6vji