feat(combobox): add flag to disable autocomplete (uber#3391)

* feat(combobox): add flag to disable autocomplete

* test(vrt): update visual snapshots for 70a320d [skip ci] (uber#3392)

Co-authored-by: UberOpenSourceBot <[email protected]>

Co-authored-by: UberOpenSourceBot <[email protected]>
Co-authored-by: UberOpenSourceBot <[email protected]>

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

@@ -65,6 +65,13 @@ const ComboboxConfig: TConfig = {
       type: PropTypes.Function,
       description: 'Transforms option to custom node in listbox.',
     },
+    autocomplete: {
+      value: true,
+      defaultValue: true,
+      type: PropTypes.Boolean,
+      description:
+        'Controls if keyboard navigation should temporarily update input value.',
+    },
     disabled: {
       value: false,
       type: PropTypes.Boolean,

src/combobox/__tests__/combobox-autocomplete-false.scenario.js

@@ -0,0 +1,43 @@
+/*
+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 * as React from 'react';
+
+import {FormControl} from '../../form-control/index.js';
+import {useStyletron} from '../../styles/index.js';
+import {Combobox} from '../index.js';
+
+type OptionT = {label: string, id: string};
+const options: OptionT[] = [
+  {label: 'AliceBlue', id: '#F0F8FF'},
+  {label: 'AntiqueWhite', id: '#FAEBD7'},
+  {label: 'Aqua', id: '#00FFFF'},
+  {label: 'Aquamarine', id: '#7FFFD4'},
+  {label: 'Azure', id: '#F0FFFF'},
+  {label: 'Beige', id: '#F5F5DC'},
+];
+
+function Example() {
+  const [css] = useStyletron();
+  const [value, setValue] = React.useState('');
+  return (
+    <div className={css({width: '375px', padding: '12px 48px'})}>
+      <FormControl label="label" caption="caption">
+        <Combobox
+          autocomplete={false}
+          value={value}
+          onChange={setValue}
+          mapOptionToString={o => o.label}
+          options={options}
+        />
+      </FormControl>
+    </div>
+  );
+}
+
+export default Example;

src/combobox/__tests__/combobox.test.js

@@ -219,4 +219,20 @@ describe('combobox', () => {
     fireEvent.click(button);
     expect(input.getAttribute('value')).toBe(updateValue);
   });
+
+  it('does not change input value while keyboard nav if autocomplete is false', () => {
+    const {container} = render(
+      <Combobox
+        autocomplete={false}
+        mapOptionToString={o => o}
+        onChange={() => {}}
+        options={options}
+        value={''}
+      />,
+      {container: document.body},
+    );
+    const input = container.querySelector('input');
+    fireEvent.keyDown(input, {keyCode: 40});
+    expect(input.getAttribute('value')).toBe('');
+  });
 });

src/combobox/combobox.js

@@ -31,6 +31,7 @@ const ARROW_DOWN = 40;
 // aria 1.2 spec: https://www.w3.org/TR/wai-aria-practices-1.2/#combobox
 function Combobox<OptionT>(props: PropsT<OptionT>) {
   const {
+    autocomplete = true,
     disabled = false,
     error = false,
     onChange,
@@ -73,12 +74,11 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
       // option and selection index is not in option bounds, reset it to default.
       setSelectionIndex(-1);
     } else {
-      // NOTE(chase): May want to consider adding an option to _not_ autocomplete the
-      // temporary value in the input element. If a feature request comes up, this is
-      // where it would go.
-      let selectedOption = options[selectionIndex];
-      if (selectedOption) {
-        setTempValue(mapOptionToString(selectedOption));
+      if (autocomplete) {
+        let selectedOption = options[selectionIndex];
+        if (selectedOption) {
+          setTempValue(mapOptionToString(selectedOption));
+        }
       }
     }
   }, [options, selectionIndex]);

src/combobox/index.d.ts

@@ -9,6 +9,7 @@ export interface SIZE {
 }
 
 export type PropsT<OptionT = unknown> = {
+  autocomplete?: boolean;
   disabled?: boolean;
   mapOptionToNode?: ({isSelected: boolean, option: OptionT}) => React.ReactNode;
   mapOptionToString: (OptionT) => string;

src/combobox/types.js

@@ -10,10 +10,10 @@ import * as React from 'react';
 
 import type {OverrideT} from '../helpers/overrides.js';
 import {SIZE} from '../input/index.js';
-// import type {InputPropsT} from '../input/index.js';
-// import type {PopoverPropsT} from '../popover/index.js';
 
 export type PropsT<OptionT = mixed> = {|
+  // Controls if the input value will be updated while keyboard navigating. Defaults to true.
+  autocomplete?: boolean,
   // Disallows text input and listbox opening.
   disabled?: boolean,
   // Proxies value through to Input component.