fix(hooks): suppressRefError improvement (#1618)

downshift-js · Aug 12, 2024 · 59d3498 · 59d3498
1 parent 59246b6
commit 59d3498
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 13 deletions.
diff --git a/src/hooks/useCombobox/__tests__/getInputProps.test.js b/src/hooks/useCombobox/__tests__/getInputProps.test.js
@@ -2085,6 +2085,7 @@ describe('getInputProps', () => {
 
   describe('non production errors', () => {
     beforeEach(() => {
+      // usually it is disabled by test utils.
       const {useGetterPropsCalledChecker} = jest.requireActual('../../utils')
       jest
         .spyOn(utils, 'useGetterPropsCalledChecker')
@@ -2138,6 +2139,19 @@ describe('getInputProps', () => {
       )
     })
 
+    test('will not be displayed if element ref is not set and suppressRefError is true', () => {
+      renderHook(() => {
+        const {getInputProps, getMenuProps} = useCombobox({
+          items,
+        })
+
+        getMenuProps({}, {suppressRefError: true})
+        getInputProps({}, {suppressRefError: true})
+      })
+
+      expect(console.error).not.toHaveBeenCalled()
+    })
+
     test('will not be displayed if called with a correct ref', () => {
       const refFn = jest.fn()
       const inputNode = {}

diff --git a/src/hooks/useCombobox/__tests__/getMenuProps.test.js b/src/hooks/useCombobox/__tests__/getMenuProps.test.js
@@ -135,6 +135,7 @@ describe('getMenuProps', () => {
 
   describe('non production errors', () => {
     beforeEach(() => {
+      // usally disabled by test utils.
       const {useGetterPropsCalledChecker} = jest.requireActual('../../utils')
       jest
         .spyOn(utils, 'useGetterPropsCalledChecker')
@@ -191,6 +192,19 @@ describe('getMenuProps', () => {
       )
     })
 
+    test('will not be displayed if element ref is not set and suppressRefError is true', () => {
+      renderHook(() => {
+        const {getInputProps, getMenuProps} = useCombobox({
+          items,
+        })
+
+        getMenuProps({}, {suppressRefError: true})
+        getInputProps({}, {suppressRefError: true})
+      })
+
+      expect(console.error).not.toHaveBeenCalled()
+    })
+
     test('will not be displayed if called with a correct ref', () => {
       const refFn = jest.fn()
       const menuNode = {}

diff --git a/src/hooks/useMultipleSelection/__tests__/getDropdownProps.test.js b/src/hooks/useMultipleSelection/__tests__/getDropdownProps.test.js
@@ -244,6 +244,7 @@ describe('getDropdownProps', () => {
 
   describe('non production errors', () => {
     beforeEach(() => {
+      // usually disabled by test utils.
       const {useGetterPropsCalledChecker} = jest.requireActual('../../utils')
       jest
         .spyOn(utils, 'useGetterPropsCalledChecker')
@@ -262,6 +263,23 @@ describe('getDropdownProps', () => {
       )
     })
 
+    test('will not be displayed if getDropdownProps is not called on subsequent renders', () => {
+      let firstRender = true
+      const {rerender} = renderHook(() => {
+        const {getDropdownProps} = useMultipleSelection()
+
+        // eslint-disable-next-line jest/no-if, jest/no-conditional-in-test
+        if (firstRender) {
+          firstRender = false
+          getDropdownProps({}, {suppressRefError: true})
+        }
+      })
+
+      rerender()
+
+      expect(console.error).not.toHaveBeenCalled()
+    })
+
     test('will be displayed if element ref is not set and suppressRefError is false', () => {
       renderHook(() => {
         const {getDropdownProps} = useMultipleSelection()

diff --git a/src/hooks/utils.js b/src/hooks/utils.js
@@ -448,39 +448,40 @@ let useGetterPropsCalledChecker = () => noop
 /* istanbul ignore next */
 if (process.env.NODE_ENV !== 'production') {
   useGetterPropsCalledChecker = (...propKeys) => {
-    const isInitialMountRef = useRef(true)
     const getterPropsCalledRef = useRef(
       propKeys.reduce((acc, propKey) => {
         acc[propKey] = {}
+
         return acc
       }, {}),
     )
 
     useEffect(() => {
       Object.keys(getterPropsCalledRef.current).forEach(propKey => {
         const propCallInfo = getterPropsCalledRef.current[propKey]
-        if (isInitialMountRef.current) {
-          if (!Object.keys(propCallInfo).length) {
-            // eslint-disable-next-line no-console
-            console.error(
-              `downshift: You forgot to call the ${propKey} getter function on your component / element.`,
-            )
-            return
-          }
+
+        if (!Object.keys(propCallInfo).length) {
+          // eslint-disable-next-line no-console
+          console.error(
+            `downshift: You forgot to call the ${propKey} getter function on your component / element.`,
+          )
+          return
         }
 
         const {suppressRefError, refKey, elementRef} = propCallInfo
 
-        if ((!elementRef || !elementRef.current) && !suppressRefError) {
+        if (suppressRefError) {
+          return
+        }
+
+        if (!elementRef?.current) {
           // eslint-disable-next-line no-console
           console.error(
             `downshift: The ref prop "${refKey}" from ${propKey} was not applied correctly on your element.`,
           )
         }
       })
-
-      isInitialMountRef.current = false
-    })
+    }, [])
 
     const setGetterPropCallInfo = useCallback(
       (propKey, suppressRefError, refKey, elementRef) => {