From 0237a2064b83fe5e7811c0cf36e4c9a621447d10 Mon Sep 17 00:00:00 2001
From: Trevor Pierce <1Copenut@users.noreply.github.com>
Date: Tue, 23 Oct 2018 08:35:13 -0500
Subject: [PATCH] [feature] class-based-select (#284)

* WIP. Converting Select to React PureComponent.

* Adding focusTrigger to select, textfield, autocomplete.

* Adding autocomplete override to TextField for Chrome

* Updating autoComplete and removing yarn.lock from changeset.

* Removing yarn.lock from feature branch.

* Adding back yarn.lock file.

* Adding back the master version of packages/core/yarn.lock

* Adding a final tweak to the autoComplete attribute.

* Changing autoComplete to nope to correct Chrome issue.

* Adding updated comments for Autocomplete.

* Bumping Downshift and lockfile.

* Comment refactor to rebuild.
---
 packages/core/package.json                    |  2 +-
 .../Autocomplete/Autocomplete.example.jsx     |  1 +
 .../components/Autocomplete/Autocomplete.jsx  | 28 ++++++-
 .../core/src/components/ChoiceList/Select.jsx | 83 +++++++++++++------
 .../src/components/ChoiceList/Select.test.jsx | 50 +++++++----
 .../src/components/TextField/TextField.jsx    | 15 +++-
 .../components/TextField/TextField.test.jsx   | 16 +++-
 packages/core/yarn.lock                       | 12 +--
 8 files changed, 149 insertions(+), 58 deletions(-)

diff --git a/packages/core/package.json b/packages/core/package.json
index 9e7220651a..90c0c0d7e1 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -12,7 +12,7 @@
     "@cmsgov/design-system-support": "^1.27.0",
     "classnames": "^2.2.5",
     "core-js": "^2.5.3",
-    "downshift": "^1.28.2",
+    "downshift": "1.31.16",
     "ev-emitter": "^1.1.1",
     "lodash.uniqueid": "^4.0.1",
     "react-aria-modal": "^2.11.1",
diff --git a/packages/core/src/components/Autocomplete/Autocomplete.example.jsx b/packages/core/src/components/Autocomplete/Autocomplete.example.jsx
index d94f4505d5..8d943470c6 100644
--- a/packages/core/src/components/Autocomplete/Autocomplete.example.jsx
+++ b/packages/core/src/components/Autocomplete/Autocomplete.example.jsx
@@ -40,6 +40,7 @@ ReactDOM.render(
           name: 'Cook County, OR'
         }
       ]}
+      focusTrigger
       label="Select from the options below:"
       onChange={selectedItem => console.log(selectedItem)}
       onInputValueChange={inputVal =>
diff --git a/packages/core/src/components/Autocomplete/Autocomplete.jsx b/packages/core/src/components/Autocomplete/Autocomplete.jsx
index 0a47eb68e1..99c56d9869 100644
--- a/packages/core/src/components/Autocomplete/Autocomplete.jsx
+++ b/packages/core/src/components/Autocomplete/Autocomplete.jsx
@@ -23,9 +23,10 @@ export class Autocomplete extends React.PureComponent {
   constructor(props) {
     super(props);
 
-    this.id = uniqueId('autocomplete_');
+    this.id = this.props.id || uniqueId('autocomplete_');
     this.labelId = uniqueId('autocomplete_header_');
     this.listboxId = uniqueId('autocomplete_owned_listbox_');
+    this.loader = null;
   }
 
   filterItems(
@@ -69,12 +70,14 @@ export class Autocomplete extends React.PureComponent {
   }
 
   renderChildren(getInputProps) {
-    // Extend props on the TextField, by passing them through
-    // Downshift's `getInputProps` method
+    // Extend props on the TextField, by passing them
+    // through Downshift's `getInputProps` method
     return React.Children.map(this.props.children, child => {
       if (isTextField(child)) {
         const propOverrides = {
           'aria-controls': this.listboxId,
+          autoComplete: this.props.autoCompleteLabel,
+          focusTrigger: this.props.focusTrigger,
           id: this.id,
           onBlur: child.props.onBlur,
           onChange: child.props.onChange,
@@ -167,6 +170,7 @@ export class Autocomplete extends React.PureComponent {
 
 Autocomplete.defaultProps = {
   ariaClearLabel: 'Clear typeahead and search again',
+  autoCompleteLabel: 'nope',
   clearInputText: 'Clear search',
   itemToString: item => (item ? item.name : ''),
   loadingMessage: 'Loading...',
@@ -178,6 +182,13 @@ Autocomplete.propTypes = {
    * Screenreader-specific label for the Clear search `<button>`. Intended to provide a longer, more descriptive explanation of the button's behavior.
    */
   ariaClearLabel: PropTypes.string,
+  /**
+   * Control the `TextField` autocomplete attribute. Defaults to 'nope' to prevent Chrome
+   * from autofilling user presets.
+   *
+   * https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
+   */
+  autoCompleteLabel: PropTypes.string,
   children: PropTypes.node,
   /**
    * Additional classes to be added to the root element.
@@ -188,6 +199,17 @@ Autocomplete.propTypes = {
    * Clear search text that will appear on the page as part of the rendered `<button>` component
    */
   clearInputText: PropTypes.node,
+  /**
+   * Used to focus child `TextField` on `componentDidMount()`
+   */
+  focusTrigger: PropTypes.bool,
+  /**
+   * A unique id to be passed to the child `TextField`. If no id is passed as a prop,
+   * the `Autocomplete` component will auto-generate one. This prop was provided in cases
+   * where an id might need to be passed to multiple components, such as the `htmlFor`
+   * attribute on a label and the id of an input.
+   */
+  id: PropTypes.string,
   /**
    * Used to determine the string value for the selected item (which is used to compute the `inputValue`).
    *
diff --git a/packages/core/src/components/ChoiceList/Select.jsx b/packages/core/src/components/ChoiceList/Select.jsx
index 0ef3efb9e5..a11dbe9af5 100644
--- a/packages/core/src/components/ChoiceList/Select.jsx
+++ b/packages/core/src/components/ChoiceList/Select.jsx
@@ -8,37 +8,58 @@ import uniqueId from 'lodash.uniqueid';
  * Any _undocumented_ props that you pass to this component will be passed
  * to the `select` element, so you can use this to set additional attributes if
  * necessary.
+ *
+ * Class-based component gives flexibility for active focus management
+ * by allowing refs to be passed.
  */
-export const Select = function(props) {
-  /* eslint-disable prefer-const */
-  let {
-    // Using let rather than const since we sometimes rewrite id
-    children,
-    className,
-    id,
-    inversed,
-    size,
-    ...selectProps
-  } = props;
-  /* eslint-enable prefer-const */
 
-  const classes = classNames(
-    'ds-c-field',
-    { 'ds-c-field--inverse': inversed },
-    className,
-    size && `ds-c-field--${size}`
-  );
-
-  if (!id) {
-    id = uniqueId(`select_${selectProps.name}_`);
+export class Select extends React.PureComponent {
+  componentDidMount() {
+    if (this.props.focusTrigger) {
+      this.loader && this.loader.focus();
+    }
   }
 
-  return (
-    <select className={classes} id={id} {...selectProps}>
-      {children}
-    </select>
-  );
-};
+  render() {
+    /* eslint-disable prefer-const */
+    let {
+      // Using let rather than const since we sometimes rewrite id
+      children,
+      className,
+      focusTrigger,
+      id,
+      inversed,
+      selectRef,
+      size,
+      ...selectProps
+    } = this.props;
+    /* eslint-enable prefer-const */
+
+    const classes = classNames(
+      'ds-c-field',
+      { 'ds-c-field--inverse': inversed },
+      className,
+      size && `ds-c-field--${size}`
+    );
+
+    if (!id) {
+      id = uniqueId(`select_${selectProps.name}_`);
+    }
+
+    return (
+      <select
+        className={classes}
+        id={id}
+        /* eslint-disable no-return-assign */
+        ref={focusTrigger ? loader => (this.loader = loader) : selectRef}
+        /* eslint-enable no-return-assign */
+        {...selectProps}
+      >
+        {children}
+      </select>
+    );
+  }
+}
 
 Select.propTypes = {
   children: PropTypes.node.isRequired,
@@ -52,6 +73,10 @@ Select.propTypes = {
    */
   defaultValue: PropTypes.string,
   disabled: PropTypes.bool,
+  /**
+   * Used to focus `select` on `componentDidMount()`
+   */
+  focusTrigger: PropTypes.bool,
   /**
    * A unique ID to be used for the select field. A unique ID will be generated
    * if one isn't provided.
@@ -82,6 +107,10 @@ Select.propTypes = {
   name: PropTypes.string.isRequired,
   onBlur: PropTypes.func,
   onChange: PropTypes.func,
+  /**
+   * Access a reference to the `select` element
+   */
+  selectRef: PropTypes.func,
   /**
    * Set the max-width of the input either to `'small'` or `'medium'`.
    */
diff --git a/packages/core/src/components/ChoiceList/Select.test.jsx b/packages/core/src/components/ChoiceList/Select.test.jsx
index 008f8e248c..b2b48afa6d 100644
--- a/packages/core/src/components/ChoiceList/Select.test.jsx
+++ b/packages/core/src/components/ChoiceList/Select.test.jsx
@@ -1,6 +1,6 @@
+import { mount, shallow } from 'enzyme';
 import React from 'react';
 import Select from './Select';
-import { shallow } from 'enzyme';
 
 /**
  * Generate <option> elements
@@ -27,44 +27,43 @@ function generateOptions(count) {
  * @param {number} optionsCount - Total number of <option>'s
  * @return {object}
  */
-function shallowRender(customProps = {}, optionsCount = 1) {
+function render(customProps = {}, optionsCount = 1, deep = false) {
   const props = Object.assign(
     {
       name: 'presidents'
     },
     customProps
   );
+  const component = <Select {...props}>{generateOptions(optionsCount)}</Select>;
 
   return {
     props: props,
-    wrapper: shallow(
-      <Select {...props}>{generateOptions(optionsCount)}</Select>
-    )
+    wrapper: deep ? mount(component) : shallow(component)
   };
 }
 
 describe('Select', () => {
   it('renders a select menu', () => {
-    const data = shallowRender();
+    const data = render();
 
     expect(data.wrapper.is('select')).toBe(true);
     expect(data.wrapper.prop('name')).toBe(data.props.name);
   });
 
   it('has correct class names', () => {
-    const data = shallowRender();
+    const data = render();
 
     expect(data.wrapper.hasClass('ds-c-field')).toBe(true);
   });
 
   it("renders <option>'s as children", () => {
-    const data = shallowRender({}, 10);
+    const data = render({}, 10);
 
     expect(data.wrapper.children('option').length).toBe(10);
   });
 
   it('has a selected <option>', () => {
-    const data = shallowRender(
+    const data = render(
       {
         defaultValue: '2' // the second generated option
       },
@@ -83,7 +82,7 @@ describe('Select', () => {
   });
 
   it('applies additional classNames to root element', () => {
-    const data = shallowRender({ className: 'foo' });
+    const data = render({ className: 'foo' });
 
     expect(data.wrapper.hasClass(data.props.className)).toBe(true);
     // Make sure we're not replacing the other class names
@@ -91,50 +90,65 @@ describe('Select', () => {
   });
 
   it('adds size classes to root element', () => {
-    const mediumData = shallowRender({ size: 'medium' });
-    const smallData = shallowRender({ size: 'small' });
+    const mediumData = render({ size: 'medium' });
+    const smallData = render({ size: 'small' });
 
     expect(mediumData.wrapper.hasClass('ds-c-field--medium')).toBe(true);
     expect(smallData.wrapper.hasClass('ds-c-field--small')).toBe(true);
   });
 
   it('is disabled', () => {
-    const data = shallowRender({ disabled: true });
+    const data = render({ disabled: true });
 
     expect(data.wrapper.prop('disabled')).toBe(true);
   });
 
   it('is not disabled', () => {
-    const data = shallowRender();
+    const data = render();
 
     expect(data.wrapper.prop('disabled')).toBeUndefined();
   });
 
   it('is required', () => {
-    const data = shallowRender({ required: true });
+    const data = render({ required: true });
 
     expect(data.wrapper.prop('required')).toBe(true);
   });
 
   it('is inversed', () => {
-    const data = shallowRender({ inversed: true });
+    const data = render({ inversed: true });
 
     expect(data.wrapper.hasClass('ds-c-field--inverse')).toBe(true);
   });
 
   it('accepts a custom id', () => {
-    const data = shallowRender({ id: 'custom_id' });
+    const data = render({ id: 'custom_id' });
 
     expect(data.wrapper.prop('id')).toBe(data.props.id);
   });
 
   it('generates a unique id', () => {
-    const data = shallowRender();
+    const data = render();
     const idRegex = new RegExp(`select_${data.props.name}_[0-9]+`);
 
     expect(data.wrapper.prop('id')).toMatch(idRegex);
   });
 
+  it('focuses the select when focusTrigger is passed', () => {
+    const data = render(
+      {
+        id: 'focus',
+        focusTrigger: true
+      },
+      null,
+      true
+    );
+
+    expect(data.wrapper.find('select').props().id).toEqual(
+      document.activeElement.id
+    );
+  });
+
   describe('event handlers', () => {
     let wrapper;
     let onBlurMock;
diff --git a/packages/core/src/components/TextField/TextField.jsx b/packages/core/src/components/TextField/TextField.jsx
index 27baf37324..10cf0c4a6c 100644
--- a/packages/core/src/components/TextField/TextField.jsx
+++ b/packages/core/src/components/TextField/TextField.jsx
@@ -17,6 +17,12 @@ export class TextField extends React.PureComponent {
     this.id = props.id || uniqueId('textfield_');
   }
 
+  componentDidMount() {
+    if (this.props.focusTrigger) {
+      this.loader && this.loader.focus();
+    }
+  }
+
   ariaLabel() {
     if (this.props.ariaLabel) {
       return this.props.ariaLabel;
@@ -70,6 +76,7 @@ export class TextField extends React.PureComponent {
       className,
       labelClassName,
       fieldClassName,
+      focusTrigger,
       errorMessage,
       hint,
       id,
@@ -109,7 +116,9 @@ export class TextField extends React.PureComponent {
         aria-label={this.ariaLabel()}
         className={fieldClasses}
         id={this.id}
-        ref={fieldRef}
+        /* eslint-disable no-return-assign */
+        ref={focusTrigger ? loader => (this.loader = loader) : fieldRef}
+        /* eslint-enable no-return-assign */
         rows={_rows}
         type={multiline ? undefined : type}
         {...fieldProps}
@@ -164,6 +173,10 @@ TextField.propTypes = {
    * Access a reference to the `input` or `textarea` element
    */
   fieldRef: PropTypes.func,
+  /**
+   * Used to focus `input` on `componentDidMount()`
+   */
+  focusTrigger: PropTypes.bool,
   /**
    * Additional hint text to display
    */
diff --git a/packages/core/src/components/TextField/TextField.test.jsx b/packages/core/src/components/TextField/TextField.test.jsx
index 44e1769651..1721d7b38b 100644
--- a/packages/core/src/components/TextField/TextField.test.jsx
+++ b/packages/core/src/components/TextField/TextField.test.jsx
@@ -199,6 +199,20 @@ describe('TextField', function() {
     expect(ref.value).toBe(data.props.defaultValue);
   });
 
+  it('focuses the input when focusTrigger is passed', () => {
+    const data = render(
+      {
+        id: 'focus',
+        focusTrigger: true
+      },
+      true
+    );
+
+    expect(data.wrapper.find('input').props().id).toEqual(
+      document.activeElement.id
+    );
+  });
+
   describe('has error', () => {
     let data;
 
@@ -220,8 +234,6 @@ describe('TextField', function() {
           .hasClass('ds-c-field--error')
       ).toBe(true);
     });
-
-    it('sets aria-describedby field attribute');
   });
 
   describe('has inversed theme', () => {
diff --git a/packages/core/yarn.lock b/packages/core/yarn.lock
index 4a9d192760..eb9b8dc5d0 100644
--- a/packages/core/yarn.lock
+++ b/packages/core/yarn.lock
@@ -2,9 +2,9 @@
 # yarn lockfile v1
 
 
-"@cmsgov/design-system-support@^1.25.0":
-  version "1.25.0"
-  resolved "https://registry.yarnpkg.com/@cmsgov/design-system-support/-/design-system-support-1.25.0.tgz#c4990f44f36bc61f428ea1be227141ce1bf63710"
+"@cmsgov/design-system-support@^1.27.0":
+  version "1.27.0"
+  resolved "https://registry.yarnpkg.com/@cmsgov/design-system-support/-/design-system-support-1.27.0.tgz#57e9a2b60f936a86bc880003429452e3e8a97005"
   dependencies:
     uswds "1.3.1"
 
@@ -398,9 +398,9 @@ domready@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/domready/-/domready-1.0.8.tgz#91f252e597b65af77e745ae24dd0185d5e26d58c"
 
-downshift@^1.28.2:
-  version "1.28.2"
-  resolved "https://registry.yarnpkg.com/downshift/-/downshift-1.28.2.tgz#ff5b4e89ff439943a8e58890993015199604e1e6"
+downshift@1.31.16:
+  version "1.31.16"
+  resolved "https://registry.yarnpkg.com/downshift/-/downshift-1.31.16.tgz#acd81631539502d4112d01bd573654419fd9f640"
 
 duplexer2@^0.1.2, duplexer2@~0.1.0, duplexer2@~0.1.2:
   version "0.1.4"