Merge branch 'master' into combobox-on-search-callback

documentation-site/components/yard/config/input.ts

@@ -85,6 +85,12 @@ export const inputProps = {
     description:
       'If true, adds a clear value icon button to the end of the input container.',
   },
+  clearOnEscape: {
+    value: true,
+    type: PropTypes.Boolean,
+    description:
+      'If true, clears the input when the Escape button is pressed with the input focused.',
+  },
   startEnhancer: {
     value: undefined,
     placeholder: '() => <span>$</span>',

documentation-site/pages/components/input.mdx

@@ -75,7 +75,7 @@ Consider if you can format the value of the input on a blur event, rather than o
   <Clearable />
 </Example>
 
-When `clearable` is true, pressing the `Escape` key or clicking the clear icon on the right will clear the input's current value.
+When `clearable` is true, clicking the clear icon on the right will clear the input's current value. By default, pressing the Escape key also clears the input, but this can be disabled by setting the `clearOnEscape` prop to false.
 Other input components such as [`Textarea`](/components/textarea), [`PhoneInput`](/components/phone-input), and [`PaymentCard`](/components/payment-card) also respect the `clearable` property.
 
 <Example title="Input for passwords" path="input/password.js">

src/input/__tests__/input-clearable-noescape.scenario.js

@@ -0,0 +1,29 @@
+/*
+Copyright (c) 2018-2020 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// @flow
+
+import React from 'react';
+
+import {StatefulInput} from '../index.js';
+
+export default function Scenario() {
+  return (
+    <StatefulInput
+      clearable
+      clearOnEscape={false}
+      initialState={{value: 'Thing'}}
+      overrides={{
+        Input: {
+          props: {'data-e2e': 'input'},
+        },
+        ClearIcon: {
+          props: {'data-e2e': 'clear-icon'},
+        },
+      }}
+    />
+  );
+}

src/input/__tests__/input.e2e.js

@@ -68,6 +68,20 @@ describe('input', () => {
       });
     });
 
+    it('not with escape key when its disabled', async () => {
+      await mount(page, 'input-clearable-noescape');
+      await page.waitFor(selectors.input);
+
+      let inputValue = await page.$eval(selectors.input, input => input.value);
+      expect(inputValue).toBe('Thing');
+
+      await page.focus(selectors.input);
+      await page.keyboard.press('Escape');
+
+      inputValue = await page.$eval(selectors.input, input => input.value);
+      expect(inputValue).toBe('Thing');
+    });
+
     it('with delete icon', async () => {
       await mount(page, 'input-clearable');
       await page.waitFor(selectors.input);

src/input/base-input.js

@@ -55,6 +55,7 @@ class BaseInput<T: EventTarget> extends React.Component<
     onFocus: () => {},
     onClear: () => {},
     clearable: false,
+    clearOnEscape: true,
     overrides: {},
     pattern: null,
     placeholder: '',
@@ -115,7 +116,11 @@ class BaseInput<T: EventTarget> extends React.Component<
   }
 
   onInputKeyDown = (e: KeyboardEvent) => {
-    if (this.props.clearable && e.key === 'Escape' && this.inputRef.current) {
+    if (
+      this.props.clearOnEscape &&
+      e.key === 'Escape' &&
+      this.inputRef.current
+    ) {
       this.clearValue();
       // prevent event from closing modal or doing something unexpected
       e.stopPropagation();

src/input/types.js

@@ -122,6 +122,8 @@ export type BaseInputPropsT<T> = {|
   onFocus: (e: SyntheticFocusEvent<T>) => mixed,
   /** If true, adds a clear value icon button to the end of the input container. */
   clearable?: boolean,
+  /** If undefined or true, clears the input when the Escape button is pressed with the input focused. True by default. */
+  clearOnEscape?: boolean,
   onClear?: (e: SyntheticEvent<T>) => mixed,
   overrides: BaseInputComponentsT,
   placeholder?: string,

src/textarea/__tests__/__snapshots__/textarea.test.js.snap

@@ -78,6 +78,7 @@ Object {
   "aria-labelledby": null,
   "autoComplete": "on",
   "autoFocus": false,
+  "clearOnEscape": true,
   "clearable": false,
   "data-baseweb": "textarea",
   "disabled": false,
@@ -128,6 +129,7 @@ Object {
   "aria-labelledby": null,
   "autoComplete": "on",
   "autoFocus": false,
+  "clearOnEscape": true,
   "clearable": false,
   "data-baseweb": "textarea",
   "disabled": false,