From 0f5738ffe875ac1386ce4e7da0db673e238846ad Mon Sep 17 00:00:00 2001
From: vhu-axelor <146069039+vhu-axelor@users.noreply.github.com>
Date: Wed, 4 Dec 2024 13:29:29 +0100
Subject: [PATCH] fix: issue on save for the Increment value on form (#823)

* RM#87714
---
 changelogs/unreleased/87714.json                |  5 +++++
 .../molecules/Increment/Increment.tsx           | 17 +++++++++++++++--
 2 files changed, 20 insertions(+), 2 deletions(-)
 create mode 100644 changelogs/unreleased/87714.json

diff --git a/changelogs/unreleased/87714.json b/changelogs/unreleased/87714.json
new file mode 100644
index 0000000000..c73eab50f2
--- /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 0f7b1a54e0..2dc41aff4c 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<any>(null);
+  const clickOutside = useClickOutside({
+    wrapperRef: inputRef,
+  });
 
   const [valueQty, setValueQty] = useState<string>(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) {