diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md index ebc683d1392c9d..1f430baffffadb 100644 --- a/packages/fluentui/CHANGELOG.md +++ b/packages/fluentui/CHANGELOG.md @@ -21,6 +21,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ### Fixes - `ChatMessage` action menu is moved horizontally at the start in RTL. @silviuaavram ([#26378](https://github.com/microsoft/fluentui/pull/26378)) - Add property that manages if panels should be rerendered or not ([#25368](https://github.com/microsoft/fluentui/pull/25368)) +- `Dropdown`: Allow clear on Enter/Space press. @jurokapsiar ([#26685](https://github.com/microsoft/fluentui/pull/26685)) ## [v0.66.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-northstar_v0.66.0) (2023-01-06) diff --git a/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx b/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx index 9b19b3dda2971b..1c751c701993bb 100644 --- a/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx +++ b/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx @@ -11,7 +11,7 @@ import { } from '@fluentui/react-bindings'; import { handleRef, Ref } from '@fluentui/react-component-ref'; import * as customPropTypes from '@fluentui/react-proptypes'; -import { indicatorBehavior, AccessibilityAttributes, getCode, keyboardKey } from '@fluentui/accessibility'; +import { indicatorBehavior, AccessibilityAttributes, getCode, keyboardKey, SpacebarKey } from '@fluentui/accessibility'; import * as React from 'react'; import * as PropTypes from 'prop-types'; import * as _ from 'lodash'; @@ -1744,14 +1744,21 @@ export const Dropdown = (React.forwardRef((props, defaultProps: () => ({ className: dropdownSlotClassNames.clearIndicator, styles: resolvedStyles.clearIndicator, - accessibility: indicatorBehavior, - ...(!search && { tabIndex: 0, role: 'button' }), + ...(!search ? { tabIndex: 0, role: 'button' } : { accessibility: indicatorBehavior }), }), overrideProps: (predefinedProps: BoxProps) => ({ onClick: (e: React.SyntheticEvent) => { _.invoke(predefinedProps, 'onClick', e); handleClear(e); }, + onKeyDown: (e: React.KeyboardEvent) => { + _.invoke(predefinedProps, 'onKeyDown', e); + const keyCode = getCode(e); + if (!search && (keyCode === keyboardKey.Enter || keyCode === SpacebarKey)) { + handleClear(e); + e.preventDefault(); + } + }, }), }) : Box.create(toggleIndicator, { diff --git a/packages/fluentui/react-northstar/test/specs/components/Dropdown/Dropdown-test.tsx b/packages/fluentui/react-northstar/test/specs/components/Dropdown/Dropdown-test.tsx index 1e68ef9373a3fc..55e2e3aeb66482 100644 --- a/packages/fluentui/react-northstar/test/specs/components/Dropdown/Dropdown-test.tsx +++ b/packages/fluentui/react-northstar/test/specs/components/Dropdown/Dropdown-test.tsx @@ -43,6 +43,17 @@ describe('Dropdown', () => { expect(triggerButtonNode).toHaveTextContent(''); }); + it('value is cleared at Icon enter press', () => { + const { triggerButtonNode, keyDownOnClearIndicator } = renderDropdown({ + clearable: true, + defaultValue: items[0], + }); + + keyDownOnClearIndicator('Enter'); + + expect(triggerButtonNode).toHaveTextContent(''); + }); + it('calls onChange on Icon click with an `empty` value', () => { const onChange = jest.fn(); const { clickOnClearIndicator } = renderDropdown({ diff --git a/packages/fluentui/react-northstar/test/specs/components/Dropdown/test-utils.tsx b/packages/fluentui/react-northstar/test/specs/components/Dropdown/test-utils.tsx index 723c0843f24149..9828e1471a067b 100644 --- a/packages/fluentui/react-northstar/test/specs/components/Dropdown/test-utils.tsx +++ b/packages/fluentui/react-northstar/test/specs/components/Dropdown/test-utils.tsx @@ -74,6 +74,9 @@ const renderDropdown = (props: DropdownProps = {}, attachTo?: HTMLElement) => { ), ); }, + keyDownOnClearIndicator: (key: string, optional?: Object) => { + getClearIndicatorWrapper().simulate('keydown', { key, ...optional }); + }, keyDownOnSearchInput: (key: string, optional?: Object) => searchInputWrapper.simulate('keydown', { key, ...optional }), keyDownOnItemsList: (key: string, optional?: Object) => itemsListWrapper.simulate('keydown', { key, ...optional }),