diff --git a/src/hooks/useCombobox/__tests__/getInputProps.test.js b/src/hooks/useCombobox/__tests__/getInputProps.test.js index 7f6ad371..50e55b0e 100644 --- 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 index 554536c3..36437c7b 100644 --- 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 index fd9d9109..452fc3aa 100644 --- 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 index defceeb4..b2c583c9 100644 --- a/src/hooks/utils.js +++ b/src/hooks/utils.js @@ -448,10 +448,10 @@ 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 }, {}), ) @@ -459,28 +459,29 @@ if (process.env.NODE_ENV !== 'production') { 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) => {