Copy/Paste into Masked Input don't persist when clicking somewhere else (React)
velvet-dream opened this issue · comments
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 )
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.