const intl = useIntl();
const input = useRef<null | HTMLElement>(null);
const [value, setValue] = useState(parentValue ?? '');
- const [dirty, setDirty] = useState(false);
const debouncedOnChange = useMemo(
() =>
debounce((val: string) => {
onChange(val);
- setDirty(false);
}, DEBOUNCE_DELAY),
[onChange],
);
});
useEffect(() => {
- if (parentValue !== undefined && !dirty) {
+ // initially letting parentValue control the value of the input
+ // later the value is controlled by the local value state
+ if (parentValue === '' || (parentValue !== undefined && value === '')) {
setValue(parentValue);
}
}, [parentValue]); // eslint-disable-line
const handleInputChange = (event: React.SyntheticEvent<HTMLInputElement>) => {
const eventValue = event.currentTarget.value;
setValue(eventValue);
- setDirty(true);
changeValue(eventValue);
};