Open necm1 opened 6 months ago
Regardless of you code, if the issue was reproducible on the demo page it could be considered a proper bug report but unless it isn’t, it isn’t.
Same error. Next.js: 14.02 React hook form: 7.51.2
I resolve this problem using use-debounce react library: https://www.npmjs.com/package/use-debounce
I put the onChange function inside a useDebounceCallback, here's an example.
const handleChange = (value) => {
//handleChangeFunction
};
const debouncedHandleCellphoneChange = useDebouncedCallback(
(value) => {
handleCellphoneChange(value);
},
1
);
<PhoneInput
country={country}
value={value}
onChange={debouncedHandleCellphoneChange}
placeholder={placeholder}
/>
same issue with react-hook-form. I tried debounce for onChange handler but it doesn't work.
import React from "react";
import { useDebouncedCallback } from "use-debounce";
import { cn } from "@acme/ui";
import { PhoneInput } from "react-phone-number-input/react-hook-form-input";
interface PhoneInputWrapperProps {
name: string;
placeholder?: string;
required?: boolean;
className?: string;
onChange: (value: string) => void;
defaultValue: string;
}
const PhoneInputWrapper: React.FC<PhoneInputWrapperProps> = ({
name,
placeholder,
required,
className,
onChange,
defaultValue,
}) => {
const handleChange = useDebouncedCallback((value: string) => {
onChange(value);
}, 1);
return (
<PhoneInput
country="JP"
name={name}
required={required}
className={cn(
"h-full rounded-md border-none bg-gray-100 px-3 py-4 text-lg placeholder:text-neutral-400 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
className,
)}
placeholder={placeholder}
onChange={handleChange}
defaultValue={defaultValue}
/>
);
};
export default PhoneInputWrapper;
it seems onChange property of PhoneInput does not override onChange Event. Without onChange, it works when normally typing.
Any ideas?
same issue with react-hook-form. I tried debounce for onChange handler but it doesn't work.
import React from "react"; import { useDebouncedCallback } from "use-debounce"; import { cn } from "@acme/ui"; import { PhoneInput } from "react-phone-number-input/react-hook-form-input"; interface PhoneInputWrapperProps { name: string; placeholder?: string; required?: boolean; className?: string; onChange: (value: string) => void; defaultValue: string; } const PhoneInputWrapper: React.FC<PhoneInputWrapperProps> = ({ name, placeholder, required, className, onChange, defaultValue, }) => { const handleChange = useDebouncedCallback((value: string) => { onChange(value); }, 1); return ( <PhoneInput country="JP" name={name} required={required} className={cn( "h-full rounded-md border-none bg-gray-100 px-3 py-4 text-lg placeholder:text-neutral-400 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", className, )} placeholder={placeholder} onChange={handleChange} defaultValue={defaultValue} /> ); }; export default PhoneInputWrapper;
it seems onChange property of PhoneInput does not override onChange Event. Without onChange, it works when normally typing.
Any ideas?
Did you try to increase the delay of debouncedCallback?
I am having this issue too on next js and react-hook-form.
Hi!
If you start typing to fast, it somehow throws a "maximum depth issue".
Input.tsx:
Component.tsx:
I thought it's due to my "validate" rule, but console.log never gets triggered. Just wondering.
When I type slowly, it seems to be working - anyway this shouldn't be the case if I start typing too fast or vice versa.