Support autoFocus in Combobox-based components (#1628)

Author: mdodgelooker

packages/components/CHANGELOG.md

@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- The `autoFocus` prop will now work for inputs in `Popover` and `Dialog`
+- `Select`, `SelectMulti`, `InputTimeSelect`, and `InputSearch` now support `autoFocus`
 - `Dialog` & `Drawer` now support semantic sizes (`xxsmall - xlarge`)
 - `Dialog` now supports `placement` - `center` (default), `top` & `cover`
 - `Drawer` now supports `placement` - `left` & `right` (default)

packages/components/src/Form/Fields/FieldCheckboxGroup/FieldCheckboxGroup.story.tsx

@@ -94,6 +94,7 @@ const defaultValueCheckbox = ['swiss', 'cheddar']
 const Template: Story<FieldCheckboxGroupProps> = (args) => (
   <FieldCheckboxGroup
     {...args}
+    autoFocus
     defaultValue={defaultValueCheckbox}
     label="Cheeses"
     description="Pick all your cheeses"

packages/components/src/Form/Fields/FieldSelect/FieldSelect.story.tsx

@@ -234,6 +234,7 @@ export const SelectContent = () => {
         aria-label="Fruits"
         placeholder="Select Brand"
         defaultValue="Boulder Creek"
+        autoFocus
       />
       <Label>
         Use alignSelf="flex-start" to avoid filling height as a flex child
@@ -376,6 +377,7 @@ export const SelectDemo = () => {
               aria-label="Fruits"
               defaultValue="1"
               isClearable
+              autoFocus
             />
           </Form>
         </CardContent>

packages/components/src/Form/Fields/FieldSelectMulti/FieldSelectMulti.story.tsx

@@ -27,7 +27,12 @@
 import { Story } from '@storybook/react/types-6-0'
 import React, { useMemo, useState, useEffect } from 'react'
 import { Button } from '../../../Button'
-import { Dialog, DialogContent } from '../../../Dialog'
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+} from '../../../Dialog'
 import { Icon } from '../../../Icon'
 import { Space, SpaceVertical } from '../../../Layout'
 import { List, ListItem } from '../../../List'
@@ -280,6 +285,7 @@ export const SelectMultiDemo = () => {
   return (
     <SpaceVertical p="large" width={400}>
       <Dialog isOpen={isOpen} onClose={handleClose}>
+        <DialogHeader>SelectMulti in a Dialog</DialogHeader>
         <DialogContent>
           <FieldSelectMulti
             options={newOptions1k}
@@ -290,8 +296,10 @@ export const SelectMultiDemo = () => {
             showCreate
             defaultValues={['Boulder Creek']}
             freeInput
+            autoFocus
           />
         </DialogContent>
+        <DialogFooter />
       </Dialog>
       <Button onClick={handleClick}>Open</Button>
       <Heading>FieldSelectMulti</Heading>
@@ -308,6 +316,7 @@ export const SelectMultiDemo = () => {
           description="this is the description"
           values={['cheddar']}
           options={cheeseOptions}
+          autoFocus
         />
       </SpaceVertical>
       <Heading>SelectMulti</Heading>

packages/components/src/Form/Fields/FieldTimeSelect/FieldTimeSelect.story.tsx

@@ -93,6 +93,7 @@ export const Controlled = () => {
           label="Standard Time"
           value={controlledTime}
           onChange={setControlledTime}
+          autoFocus
         />
         <FieldTimeSelect
           label="Military Time"

packages/components/src/Form/Inputs/Checkbox/Checkbox.tsx

@@ -25,12 +25,11 @@
  */
 
 import noop from 'lodash/noop'
-import pick from 'lodash/pick'
 import React, { forwardRef, Ref, useState, FormEvent, useEffect } from 'react'
 import styled from 'styled-components'
 import { reset, space, SpaceProps } from '@looker/design-tokens'
 import isUndefined from 'lodash/isUndefined'
-import { InputProps, inputPropKeys } from '../InputProps'
+import { InputProps, pickInputProps } from '../InputProps'
 import { ValidationType } from '../../ValidationMessage'
 import { inputTextValidation } from '../InputText'
 
@@ -82,7 +81,7 @@ const CheckboxLayout = forwardRef(
       <div className={className}>
         <input
           type="checkbox"
-          {...pick(restProps, inputPropKeys)}
+          {...pickInputProps(restProps)}
           checked={!!isChecked}
           aria-checked={checked}
           aria-invalid={validationType === 'error' ? 'true' : undefined}

packages/components/src/Form/Inputs/InlineInputText/InlineInputText.tsx

@@ -24,7 +24,6 @@
 
  */
 
-import pick from 'lodash/pick'
 import React, { ChangeEvent, forwardRef, Ref, useState } from 'react'
 import isFunction from 'lodash/isFunction'
 import styled from 'styled-components'
@@ -33,7 +32,7 @@ import {
   typography,
   TypographyProps,
 } from '@looker/design-tokens'
-import { inputPropKeys, InputProps, InputTextTypeProps } from '../InputProps'
+import { pickInputProps, InputProps, InputTextTypeProps } from '../InputProps'
 import { innerInputStyle } from '../innerInputStyle'
 
 export interface InlineInputTextProps
@@ -75,7 +74,7 @@ const InlineInputTextLayout = forwardRef(
           placeholder={placeholder}
           type={type}
           ref={ref}
-          {...omitStyledProps(pick(props, inputPropKeys))}
+          {...omitStyledProps(pickInputProps(props))}
         />
         <StyledText>{displayValue || placeholder || ' '}</StyledText>
       </span>

packages/components/src/Form/Inputs/InlineTextArea/InlineTextArea.tsx

@@ -24,7 +24,6 @@
 
  */
 
-import pick from 'lodash/pick'
 import React, { ChangeEvent, forwardRef, Ref, useState } from 'react'
 import isFunction from 'lodash/isFunction'
 import styled from 'styled-components'
@@ -35,7 +34,7 @@ import {
   CompatibleHTMLProps,
   LayoutProps,
 } from '@looker/design-tokens'
-import { inputPropKeys } from '../InputProps'
+import { pickInputProps } from '../InputProps'
 
 export interface InlineTextAreaProps
   extends Omit<LayoutProps, 'size'>,
@@ -75,7 +74,7 @@ export const InlineTextAreaLayout = forwardRef(
           ref={ref}
           underlineOnlyOnHover={underlineOnlyOnHover}
           value={displayValue}
-          {...pick(props, inputPropKeys)}
+          {...pickInputProps(props)}
         />
         <VisibleText displayValue={displayValue}>
           {displayValue || placeholder}

packages/components/src/Form/Inputs/InputProps.ts

@@ -24,11 +24,14 @@
 
  */
 
+import pick from 'lodash/pick'
 import { CompatibleHTMLProps } from '@looker/design-tokens'
 import { ValidationType } from '../ValidationMessage'
 
 export interface InputProps extends CompatibleHTMLProps<HTMLInputElement> {
   validationType?: ValidationType
+  'data-autofocus'?: string
+  'data-testid'?: string
 }
 
 export interface InputTextTypeProps {
@@ -92,3 +95,19 @@ export const inputPropKeys = [
   'aria-describedby',
   'aria-labelledby',
 ]
+/**
+ * Adds data-autofocus attribute for use with focus-trap (Popover & Dialog)
+ * Can't use the autofocus dom attribute b/c React does not pass it down
+ * https://github.com/facebook/react/issues/11851
+ */
+export const getAutoFocusProps = (autoFocus?: boolean) => {
+  return autoFocus ? { autoFocus, 'data-autofocus': 'true' } : {}
+}
+
+export const pickInputProps = <T extends { autoFocus?: boolean }>({
+  autoFocus,
+  ...props
+}: T) => {
+  const inputProps = pick(props, inputPropKeys)
+  return { ...getAutoFocusProps(autoFocus), ...inputProps }
+}

packages/components/src/Form/Inputs/InputSearch/InputSearch.story.tsx

@@ -92,6 +92,7 @@ export const Advanced = () => {
       options={options}
       noOptionsLabel="Nothing matched your search"
       isClearable={false}
+      autoFocus
     />
   )
 }