diff --git a/changelogs/unreleased/87714.json b/changelogs/unreleased/87714.json new file mode 100644 index 000000000..c73eab50f --- /dev/null +++ b/changelogs/unreleased/87714.json @@ -0,0 +1,5 @@ +{ + "title": "Increment: save when click outside the input", + "type": "fix", + "packages": "ui" +} diff --git a/packages/ui/src/components/molecules/Increment/Increment.tsx b/packages/ui/src/components/molecules/Increment/Increment.tsx index 0f7b1a54e..2dc41aff4 100644 --- a/packages/ui/src/components/molecules/Increment/Increment.tsx +++ b/packages/ui/src/components/molecules/Increment/Increment.tsx @@ -26,6 +26,10 @@ import {ThemeColors, useThemeColor} from '../../../theme'; import {Input} from '../../atoms'; import IncrementButton from './IncrementButton'; import {useDigitFormat} from '../../../hooks/use-digit-format'; +import { + OUTSIDE_INDICATOR, + useClickOutside, +} from '../../../hooks/use-click-outside'; interface IncrementProps { style?: any; @@ -67,6 +71,9 @@ const Increment = ({ const Colors = useThemeColor(); const cutDecimalExcess = useDigitFormat(); const inputRef = useRef(null); + const clickOutside = useClickOutside({ + wrapperRef: inputRef, + }); const [valueQty, setValueQty] = useState(value); @@ -147,7 +154,7 @@ const Increment = ({ handleResult(newValue); }; - const handleEndInput = () => { + const handleEndInput = useCallback(() => { const unformattedValue = defaultFormatting ? valueQty.replaceAll(',', '.') : valueQty; @@ -159,7 +166,13 @@ const Increment = ({ } onBlur(); - }; + }, [defaultFormatting, handleResult, onBlur, valueQty]); + + useEffect(() => { + if (clickOutside === OUTSIDE_INDICATOR) { + handleEndInput(); + } + }, [clickOutside, handleEndInput]); const handleFocus = () => { if (defaultFormatting) {