fix(Input): clear by Escape keydown when Input is clearable

CHANGELOG.md

@@ -26,6 +26,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Fixes
 - Fix double rendering of `Popup` component @layershifter ([#1153](https://github.com/stardust-ui/react/pull/1153))
 - Docs: fix(docs): Set maximum width for examples @miroslavstastny ([#1319](https://github.com/stardust-ui/react/pull/1319))
+- Clearable `Input` can be cleared by Escape keydown @silviuavram ([#1306](https://github.com/stardust-ui/react/pull/1306))
 
 ### Features
 - Add default child a11y behavior to `Menu` related behaviors @silviuavram ([#1282](https://github.com/stardust-ui/react/pull/1282))

packages/react/src/components/Input/Input.tsx

@@ -12,9 +12,10 @@ import {
   UIComponentProps,
   ChildrenComponentProps,
   commonPropTypes,
+  applyAccessibilityKeyHandlers,
 } from '../../lib'
-import { Accessibility } from '../../lib/accessibility/types'
-import { defaultBehavior } from '../../lib/accessibility'
+import { Accessibility, AccessibilityActionHandlers } from '../../lib/accessibility/types'
+import { inputBehavior } from '../../lib/accessibility'
 import { ReactProps, ShorthandValue, ComponentEventHandler } from '../../types'
 import Icon from '../Icon/Icon'
 import Box from '../Box/Box'
@@ -112,14 +113,24 @@ class Input extends AutoControlledComponent<ReactProps<InputProps>, InputState>
   }
 
   static defaultProps = {
-    accessibility: defaultBehavior,
+    accessibility: inputBehavior,
     type: 'text',
     wrapper: {},
     iconPosition: 'end',
   }
 
   static autoControlledProps = ['value']
 
+  actionHandlers: AccessibilityActionHandlers = {
+    clear: (e: any) => {
+      if (this.props.clearable && this.state.value !== '') {
+        e.stopPropagation()
+        e.nativeEvent && e.nativeEvent.stopPropagation()
+        this.handleOnClear(e)
+      }
+    },
+  }
+
   renderComponent({
     accessibility,
     ElementType,
@@ -152,6 +163,7 @@ class Input extends AutoControlledComponent<ReactProps<InputProps>, InputState>
                   className: Input.slotClassNames.input,
                   styles: styles.input,
                   onChange: this.handleChange,
+                  ...applyAccessibilityKeyHandlers(accessibility.keyHandlers.input, htmlInputProps),
                 },
               })}
             </Ref>
@@ -179,7 +191,6 @@ class Input extends AutoControlledComponent<ReactProps<InputProps>, InputState>
       this.inputRef.current.focus()
       _.invoke(predefinedProps, 'onClick', e, this.props)
     },
-    ...(predefinedProps.onClick && { tabIndex: '0' }),
   })
 
   private handleChange = (e: React.SyntheticEvent) => {

packages/react/src/lib/accessibility/Behaviors/Input/inputBehavior.ts

@@ -1,5 +1,6 @@
 import { Accessibility } from '../../types'
 import * as _ from 'lodash'
+import * as keyboardKey from 'keyboard-key'
 
 /**
  * @specification
@@ -14,6 +15,13 @@ const inputBehavior: Accessibility = (props: any) => ({
         : !!props['disabled'],
     },
   },
+  keyActions: {
+    input: {
+      clear: {
+        keyCombinations: [{ keyCode: keyboardKey.Escape }],
+      },
+    },
+  },
 })
 
 export default inputBehavior

packages/react/test/specs/components/Input/Input-test.tsx

@@ -1,5 +1,6 @@
 import * as faker from 'faker'
 import * as React from 'react'
+import * as keyboardKey from 'keyboard-key'
 
 import { ReactWrapper } from 'enzyme'
 import { mountWithProvider as mount } from 'test/utils'
@@ -98,6 +99,44 @@ describe('Input', () => {
         expect.objectContaining({ value: '' }),
       )
     })
+
+    it('calls onChange on Escape key with an `empty` value and stops propagation when has content', () => {
+      const onChange = jest.fn()
+      const stopPropagation = jest.fn()
+      const nativeEventStopPropagation = jest.fn()
+      const wrapper = mount(
+        <Input clearable defaultValue={faker.lorem.word()} onChange={onChange} />,
+      )
+      wrapper.find('input').simulate('keydown', {
+        keyCode: keyboardKey.Escape,
+        key: 'Escape',
+        stopPropagation,
+        nativeEvent: { stopPropagation: nativeEventStopPropagation },
+      })
+      expect(onChange).toBeCalledTimes(1)
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({ type: 'keydown' }),
+        expect.objectContaining({ value: '' }),
+      )
+      expect(stopPropagation).toHaveBeenCalledTimes(1)
+      expect(nativeEventStopPropagation).toHaveBeenCalledTimes(1)
+    })
+
+    it('does not call onChange and does not stop propagation if is already empty', () => {
+      const onChange = jest.fn()
+      const stopPropagation = jest.fn()
+      const nativeEventStopPropagation = jest.fn()
+      const wrapper = mount(<Input clearable defaultValue={''} onChange={onChange} />)
+      wrapper.find('input').simulate('keydown', {
+        keyCode: keyboardKey.Escape,
+        key: 'Escape',
+        stopPropagation,
+        nativeEvent: { stopPropagation: nativeEventStopPropagation },
+      })
+      expect(onChange).not.toBeCalled()
+      expect(stopPropagation).not.toBeCalled()
+      expect(nativeEventStopPropagation).not.toBeCalled()
+    })
   })
 
   describe('icon', () => {