fix(Dropdown): Allow clear on Enter/Space press

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 ]------------------------------- -->
 ## [v0.66.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-northstar_v0.66.0) (2023-01-06)

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<HTMLDivElement, DropdownProps>((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<HTMLElement>) => {
                           _.invoke(predefinedProps, 'onClick', e);
                           handleClear(e);
                         },
+                        onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => {
+                          _.invoke(predefinedProps, 'onKeyDown', e);
+                          const keyCode = getCode(e);
+                          if (!search && (keyCode === keyboardKey.Enter || keyCode === SpacebarKey)) {
+                            handleClear(e);
+                            e.preventDefault();
+                          }
+                        },
                       }),
                     })
                   : Box.create(toggleIndicator, {

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({

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 }),