diff --git a/src/hooks/useCombobox/__tests__/getInputProps.test.js b/src/hooks/useCombobox/__tests__/getInputProps.test.js index 147fa8a2..3358e45b 100644 --- a/src/hooks/useCombobox/__tests__/getInputProps.test.js +++ b/src/hooks/useCombobox/__tests__/getInputProps.test.js @@ -52,6 +52,29 @@ afterAll(jest.restoreAllMocks) describe('getInputProps', () => { describe('hook props', () => { + test('returns an object with some default props', () => { + const {result} = renderUseCombobox() + const inputProps = result.current.getInputProps() + + expect(Object.keys(inputProps)).toEqual([ + 'ref', + 'aria-activedescendant', + 'aria-autocomplete', + 'aria-controls', + 'aria-expanded', + 'aria-labelledby', + 'aria-label', + 'autoComplete', + 'id', + 'role', + 'value', + 'onChange', + 'onKeyDown', + 'onBlur', + 'onClick', + ]) + }) + test("assign 'combobox' to role", () => { const {result} = renderUseCombobox() const inputProps = result.current.getInputProps() diff --git a/src/hooks/useCombobox/__tests__/getToggleButtonProps.test.js b/src/hooks/useCombobox/__tests__/getToggleButtonProps.test.js index cb5db7bd..b89eb067 100644 --- a/src/hooks/useCombobox/__tests__/getToggleButtonProps.test.js +++ b/src/hooks/useCombobox/__tests__/getToggleButtonProps.test.js @@ -37,6 +37,20 @@ afterAll(jest.restoreAllMocks) describe('getToggleButtonProps', () => { describe('hook props', () => { + test('returns an object with some default props', () => { + const {result} = renderUseCombobox() + const toggleButtonProps = result.current.getToggleButtonProps() + + expect(Object.keys(toggleButtonProps)).toEqual([ + 'ref', + 'aria-controls', + 'aria-expanded', + 'id', + 'tabIndex', + 'onClick', + ]) + }) + test('assign default value to id', () => { const {result} = renderUseCombobox() const toggleButtonProps = result.current.getToggleButtonProps() diff --git a/src/hooks/useCombobox/index.ts b/src/hooks/useCombobox/index.ts index 056d4266..61c13278 100644 --- a/src/hooks/useCombobox/index.ts +++ b/src/hooks/useCombobox/index.ts @@ -21,16 +21,19 @@ import { dropdownDefaultProps, useScrollIntoView, } from '../utils' +import {type GetPropsCommonOptions} from '../../downshift.types' import {getInitialState, useControlledReducer, propTypes} from './utils' import downshiftUseComboboxReducer from './reducer' import * as stateChangeTypes from './stateChangeTypes' import { UseComboboxGetInputProps, + UseComboboxGetInputPropsOptions, UseComboboxGetInputPropsReturnValue, UseComboboxGetItemProps, UseComboboxGetLabelProps, UseComboboxGetMenuProps, UseComboboxGetToggleButtonProps, + UseComboboxGetToggleButtonPropsOptions, UseComboboxMergedProps, UseComboboxProps, UseComboboxReturnValue, @@ -366,13 +369,12 @@ function useCombobox( ) as UseComboboxGetItemProps const getToggleButtonProps = useCallback( - toggleButtonProps => { + (toggleButtonProps?: UseComboboxGetToggleButtonPropsOptions) => { const { onClick, onPress, refKey = 'ref', ref, - disabled, ...rest } = toggleButtonProps ?? {} const latestState = latest.current.state @@ -390,7 +392,7 @@ function useCombobox( 'aria-expanded': latestState.isOpen, id: elementIds.toggleButtonId, tabIndex: -1, - ...(!disabled && { + ...(!rest.disabled && { ...(isReactNative || isReactNativeWeb ? /* istanbul ignore next (react-native) */ { onPress: callAllEventHandlers(onPress, toggleButtonHandleClick), @@ -399,7 +401,6 @@ function useCombobox( onClick: callAllEventHandlers(onClick, toggleButtonHandleClick), }), }), - disabled, ...rest, } }, @@ -407,10 +408,12 @@ function useCombobox( ) as UseComboboxGetToggleButtonProps const getInputProps = useCallback( - (inputProps, otherProps) => { + ( + inputProps?: UseComboboxGetInputPropsOptions, + otherProps?: GetPropsCommonOptions, + ) => { const { 'aria-label': ariaLabel, - disabled, onKeyDown, onChange, onInput, @@ -484,7 +487,7 @@ function useCombobox( | 'onChangeText' > - if (!disabled) { + if (!rest.disabled) { eventHandlers = { [onChangeKey]: callAllEventHandlers( onChange, @@ -531,7 +534,6 @@ function useCombobox( // https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion // revert back since autocomplete="nope" is ignored on latest Chrome and Opera autoComplete: 'off', - disabled, id: elementIds.inputId, role: 'combobox', value: latestState.inputValue, diff --git a/src/hooks/useCombobox/index.types.ts b/src/hooks/useCombobox/index.types.ts index 8fbe65f5..1592f074 100644 --- a/src/hooks/useCombobox/index.types.ts +++ b/src/hooks/useCombobox/index.types.ts @@ -346,7 +346,6 @@ export interface UseComboboxGetInputPropsReturnValue { 'aria-labelledby': string | undefined 'aria-label': string | undefined autoComplete: 'off' - disabled: boolean | undefined id: string role: 'combobox' value: string diff --git a/src/hooks/useSelect/__tests__/getToggleButtonProps.test.js b/src/hooks/useSelect/__tests__/getToggleButtonProps.test.js index 77f299ca..235f11ea 100644 --- a/src/hooks/useSelect/__tests__/getToggleButtonProps.test.js +++ b/src/hooks/useSelect/__tests__/getToggleButtonProps.test.js @@ -53,6 +53,26 @@ afterAll(jest.restoreAllMocks) describe('getToggleButtonProps', () => { describe('hook props', () => { + test('returns an object with some default props', () => { + const {result} = renderUseSelect() + const toggleButtonProps = result.current.getToggleButtonProps() + + expect(Object.keys(toggleButtonProps)).toEqual([ + 'ref', + 'aria-activedescendant', + 'aria-controls', + 'aria-expanded', + 'aria-haspopup', + 'aria-labelledby', + 'id', + 'role', + 'tabIndex', + 'onBlur', + 'onClick', + 'onKeyDown', + ]) + }) + test('assign default value to aria-labelledby', () => { const {result} = renderUseSelect() const toggleButtonProps = result.current.getToggleButtonProps() diff --git a/src/hooks/useSelect/index.ts b/src/hooks/useSelect/index.ts index d5840482..194e1072 100644 --- a/src/hooks/useSelect/index.ts +++ b/src/hooks/useSelect/index.ts @@ -22,6 +22,7 @@ import { dropdownDefaultProps, useScrollIntoView, } from '../utils' +import {GetPropsCommonOptions} from '../../downshift.types' import {isReactNative, isReactNativeWeb} from '../../is.macro' import downshiftSelectReducer from './reducer' import {propTypes} from './utils' @@ -31,6 +32,7 @@ import { UseSelectGetLabelProps, UseSelectGetMenuProps, UseSelectGetToggleButtonProps, + UseSelectGetToggleButtonPropsOptions, UseSelectMergedProps, UseSelectProps, UseSelectReducerAction, @@ -301,8 +303,8 @@ function useSelect( const getToggleButtonProps = useCallback( ( - toggleButtonProps?: Parameters[0], - otherProps?: Parameters[1], + toggleButtonProps?: UseSelectGetToggleButtonPropsOptions, + otherProps?: GetPropsCommonOptions, ) => { const { onBlur, @@ -311,7 +313,6 @@ function useSelect( onKeyDown, refKey = 'ref', ref, - disabled, ...rest } = toggleButtonProps ?? {} const {suppressRefError = false} = otherProps ?? {} @@ -364,11 +365,10 @@ function useSelect( role: 'combobox', tabIndex: 0, onBlur: callAllEventHandlers(onBlur, toggleButtonHandleBlur), - disabled, ...rest, } - if (!disabled) { + if (!rest.disabled) { /* istanbul ignore if (react-native) */ if (isReactNative || isReactNativeWeb) { Object.assign(toggleProps, {