From f3c5f6bea2154bf820b70693edc91989c9f0beef Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Fri, 25 Mar 2022 11:28:49 +0100
Subject: [PATCH] =?UTF-8?q?fix(editor):=20=F0=9F=90=9B=20Debounce=20value?=
 =?UTF-8?q?=20on=20popover=20close?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/shared/SearchableDropdown.tsx  | 16 ++++++----------
 .../components/shared/SmartNumberInput.tsx    | 19 +++++++++----------
 2 files changed, 15 insertions(+), 20 deletions(-)

diff --git a/apps/builder/components/shared/SearchableDropdown.tsx b/apps/builder/components/shared/SearchableDropdown.tsx
index 2ef2e9c46a0..60cc82a8a13 100644
--- a/apps/builder/components/shared/SearchableDropdown.tsx
+++ b/apps/builder/components/shared/SearchableDropdown.tsx
@@ -10,7 +10,7 @@ import {
   InputProps,
 } from '@chakra-ui/react'
 import { useState, useRef, useEffect, ChangeEvent } from 'react'
-import { useDebounce } from 'use-debounce'
+import { useDebouncedCallback } from 'use-debounce'
 
 type Props = {
   selectedItem?: string
@@ -28,8 +28,9 @@ export const SearchableDropdown = ({
 }: Props) => {
   const { onOpen, onClose, isOpen } = useDisclosure()
   const [inputValue, setInputValue] = useState(selectedItem ?? '')
-  const [debouncedInputValue] = useDebounce(
-    inputValue,
+  const debounced = useDebouncedCallback(
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onValueChange ? onValueChange : () => {},
     process.env.NEXT_PUBLIC_E2E_TEST ? 0 : debounceTimeout
   )
   const [filteredItems, setFilteredItems] = useState([
@@ -60,16 +61,10 @@ export const SearchableDropdown = ({
     handler: onClose,
   })
 
-  useEffect(() => {
-    onValueChange &&
-      debouncedInputValue !== selectedItem &&
-      onValueChange(debouncedInputValue)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [debouncedInputValue])
-
   const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {
     if (!isOpen) onOpen()
     setInputValue(e.target.value)
+    debounced(e.target.value)
     if (e.target.value === '') {
       setFilteredItems([...items.slice(0, 50)])
       return
@@ -85,6 +80,7 @@ export const SearchableDropdown = ({
 
   const handleItemClick = (item: string) => () => {
     setInputValue(item)
+    debounced(item)
     onClose()
   }
 
diff --git a/apps/builder/components/shared/SmartNumberInput.tsx b/apps/builder/components/shared/SmartNumberInput.tsx
index 774d7ac8321..47508ddaee2 100644
--- a/apps/builder/components/shared/SmartNumberInput.tsx
+++ b/apps/builder/components/shared/SmartNumberInput.tsx
@@ -7,7 +7,7 @@ import {
   NumberDecrementStepper,
 } from '@chakra-ui/react'
 import { useEffect, useState } from 'react'
-import { useDebounce } from 'use-debounce'
+import { useDebouncedCallback } from 'use-debounce'
 
 export const SmartNumberInput = ({
   value,
@@ -20,26 +20,25 @@ export const SmartNumberInput = ({
   onValueChange: (value?: number) => void
 } & NumberInputProps) => {
   const [currentValue, setCurrentValue] = useState(value?.toString() ?? '')
-  const [valueToReturn, setValueToReturn] = useState<number | undefined>(
-    parseFloat(currentValue)
-  )
-  const [debouncedValue] = useDebounce(
-    valueToReturn,
+  const debounced = useDebouncedCallback(
+    onValueChange,
     process.env.NEXT_PUBLIC_E2E_TEST ? 0 : debounceTimeout
   )
 
   useEffect(() => {
-    onValueChange(debouncedValue)
+    return () => {
+      debounced.flush()
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [debouncedValue])
+  }, [])
 
   const handleValueChange = (value: string) => {
     setCurrentValue(value)
     if (value.endsWith('.') || value.endsWith(',')) return
-    if (value === '') return setValueToReturn(undefined)
+    if (value === '') return debounced(undefined)
     const newValue = parseFloat(value)
     if (isNaN(newValue)) return
-    setValueToReturn(newValue)
+    debounced(newValue)
   }
 
   return (