Copy/Paste into Masked Input don't persist when clicking somewhere else (React)

[velvet-dream]

Describe the bug
I am using a masked input with IMaskMixin in a ReactJS project. When I try to paste something into the field and then click somewhere else (on another input for example), the pasted data disappears.
But if I type something in the input field right after pasting, the field value does persist.

Code

import { Input, InputProps } from "antd";
import React, { useState } from "react";
import { IMaskMixin } from "react-imask";

// Masks for IBANs
export const IbanMasks = {
  mask: [
    {
      // France
      mask: "FR00 0000 0000 00** **** **** *00",
    },
    {
      // Germany
      mask: "DE00 0000 0000 0000 0000 00",
    },
    // ( etc. )
  ],
};

type Props = Omit<InputProps, "autoComplete"> & {
  maskOptions: {
    mask: any;
  };
};

export const ArhInputMasked: React.FC<Props> = (props) => {
  const [opts] = useState(props.maskOptions);

  const MaskedInput = IMaskMixin(({ inputRef, ...props }: any) => {
    const extractInputRef = React.useCallback(
      (inst: React.ElementRef<typeof Input>) => inputRef(inst?.input),
      [inputRef]
    );
    return (
      <>
        <Input
          placeholder={props.placeholder ? props.placeholder : ""}
          ref={extractInputRef}
        />
      </>
    );
  });
  return (
    <MaskedInput
      {...props}
      mask={opts.mask}
    />
  );
};

Expected behavior
The pasted data should persist in the field on blur.

Environment:

• OS: Win 11
• Browser Firefox (121.0.1) and Chrome (120.0)
• IMask version : 7.3.0
• Framework/plugin version if used : React 18.2.0

Additional context
The <Input /> component used in the code is an ant design (v.4.x) component. The entire app is built upon ant design components, therefore I cannot take a regular input component.

This behavior is the same when using a regular input component anyway.

The CallBack extractInputRef used in the Input component is a way of getting the Input's actual input reference (see here #163 )

[uNmAnNeR]

hi @velvet-dream,
there is no any specific logic for handling paste events in IMask. It just handles input events under the hood. From that point typing and pasting are the same thing. I have tried to reproduce the issue according to your description but it all works fine for me:

https://stackblitz.com/edit/stackblitz-starters-u8zvps?file=src%2FApp.tsx

so i can't confirm that the problem related to react-imask. Integration with other frameworks like antd is beyond my support capabilities. If you are still experiencing this problem with raw react, please provide an example to reproduce and feel free to reopen this issue.

[Matheus-Lima-Moreira]

I'm with the same issue, did u get this @velvet-dream ?