diff --git a/front/src/modules/ui/components/editable-cell/types/EditableCellText.tsx b/front/src/modules/ui/components/editable-cell/types/EditableCellText.tsx index 9b54641f0..a0edcfc4c 100644 --- a/front/src/modules/ui/components/editable-cell/types/EditableCellText.tsx +++ b/front/src/modules/ui/components/editable-cell/types/EditableCellText.tsx @@ -1,7 +1,8 @@ -import { ChangeEvent } from 'react'; +import { ChangeEvent, useMemo, useState } from 'react'; import { InplaceInputTextDisplayMode } from '@/ui/inplace-inputs/components/InplaceInputTextDisplayMode'; import { InplaceInputTextEditMode } from '@/ui/inplace-inputs/components/InplaceInputTextEditMode'; +import { debounce } from '@/utils/debounce'; import { EditableCell } from '../EditableCell'; @@ -18,6 +19,12 @@ export function EditableCellText({ onChange, editModeHorizontalAlign, }: OwnProps) { + const [internalValue, setInternalValue] = useState(value); + + const debouncedOnChange = useMemo(() => { + return debounce(onChange, 200); + }, [onChange]); + return ( ) => { - onChange(event.target.value); + setInternalValue(event.target.value); + debouncedOnChange(event.target.value); }} /> } nonEditModeContent={ - {value} + + {internalValue} + } > );