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 305986da2..1983117a7 100644 --- a/packages/ui/src/components/molecules/Increment/Increment.tsx +++ b/packages/ui/src/components/molecules/Increment/Increment.tsx @@ -25,6 +25,10 @@ import { import {ThemeColors, useThemeColor} from '../../../theme'; import {Input} from '../../atoms'; import IncrementButton from './IncrementButton'; +import { + OUTSIDE_INDICATOR, + useClickOutside, +} from '../../../hooks/use-click-outside'; const cutDecimalExcess = number => { if (number == null) { @@ -77,6 +81,9 @@ const Increment = ({ }: IncrementProps) => { const Colors = useThemeColor(); const inputRef = useRef(null); + const clickOutside = useClickOutside({ + wrapperRef: inputRef, + }); const [valueQty, setValueQty] = useState(); @@ -157,7 +164,7 @@ const Increment = ({ handleResult(newValue); }; - const handleEndInput = () => { + const handleEndInput = useCallback(() => { const unformattedValue = defaultFormatting ? valueQty.replaceAll(',', '.') : valueQty; @@ -169,7 +176,13 @@ const Increment = ({ } onBlur(); - }; + }, [defaultFormatting, handleResult, onBlur, valueQty]); + + useEffect(() => { + if (clickOutside === OUTSIDE_INDICATOR) { + handleEndInput(); + } + }, [clickOutside, handleEndInput]); const handleFocus = () => { if (defaultFormatting) {