fix(editor): 🐛 Debounce value on popover close

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()
   }
 

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 (