From 201b162d11ecbc8d8808a332d1b58024bba2fef5 Mon Sep 17 00:00:00 2001 From: Juraj Kapsiar Date: Mon, 6 Feb 2023 11:33:26 +0100 Subject: [PATCH 1/3] fix(Dropdown): Allow clear on Enter/Space press --- .../src/components/Dropdown/Dropdown.tsx | 9 ++++++++- .../test/specs/components/Dropdown/Dropdown-test.tsx | 11 +++++++++++ .../test/specs/components/Dropdown/test-utils.tsx | 3 +++ 3 files changed, 22 insertions(+), 1 deletion(-) diff --git a/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx b/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx index 9b19b3dda2971b..b5a598e1d8cf0c 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'; @@ -1752,6 +1752,13 @@ export const Dropdown = (React.forwardRef((props, _.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); + } + }, }), }) : 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 }), From 17211aaef05d4bdc7645c9516a55dc92fdb53853 Mon Sep 17 00:00:00 2001 From: Juraj Kapsiar Date: Mon, 6 Feb 2023 11:43:28 +0100 Subject: [PATCH 2/3] remove aria-hidden, add changelog --- packages/fluentui/CHANGELOG.md | 1 + .../react-northstar/src/components/Dropdown/Dropdown.tsx | 5 +++-- 2 files changed, 4 insertions(+), 2 deletions(-) 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 b5a598e1d8cf0c..9e98622837a2cc 100644 --- a/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx +++ b/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx @@ -1744,8 +1744,7 @@ 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) => { @@ -1757,6 +1756,8 @@ export const Dropdown = (React.forwardRef((props, const keyCode = getCode(e); if (!search && (keyCode === keyboardKey.Enter || keyCode === SpacebarKey)) { handleClear(e); + e.stopPropagation(); + e.preventDefault(); } }, }), From 19e2e7ac9615921384993992bd35a6e7a487c747 Mon Sep 17 00:00:00 2001 From: Juraj Kapsiar Date: Mon, 6 Feb 2023 11:53:41 +0100 Subject: [PATCH 3/3] fix --- .../react-northstar/src/components/Dropdown/Dropdown.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx b/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx index 9e98622837a2cc..1c751c701993bb 100644 --- a/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx +++ b/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx @@ -1756,7 +1756,6 @@ export const Dropdown = (React.forwardRef((props, const keyCode = getCode(e); if (!search && (keyCode === keyboardKey.Enter || keyCode === SpacebarKey)) { handleClear(e); - e.stopPropagation(); e.preventDefault(); } },