Fix: IE11 click option in Select, etc (#1602)

Author: mdodgelooker

CHANGELOG.md

@@ -33,6 +33,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- `Select` / `SelectMulti` / `InputTimeSelect` click to select option in IE11
 - `InputTimeSelect` can accept a time that is not included in the select dropdown options
 - `FieldInline` refactored to use MS-compatible grid (IE11 compatibility)
   - `FieldCheckbox`

packages/components/src/Form/Inputs/Combobox/utils/useBlur.ts

@@ -27,6 +27,7 @@
 // Much of the following is pulled from https://github.com/reach/reach-ui
 // because their work is fantastic (but is not in TypeScript)
 import { Context, FocusEvent, useContext } from 'react'
+import { getNextFocusTarget } from '../../../../utils'
 import {
   ComboboxContextProps,
   ComboboxMultiContextProps,
@@ -64,10 +65,11 @@ export function useBlur<
       return
     }
     // we on want to close only if focus rests outside the select
+    const nextFocusTraget = getNextFocusTarget(e)
     const popoverCurrent = listRef ? listRef.current : null
     if (popoverCurrent) {
       const focusInList =
-        popoverCurrent && popoverCurrent.contains(e.relatedTarget as Node)
+        popoverCurrent && popoverCurrent.contains(nextFocusTraget as Node)
 
       requestAnimationFrame(() => {
         if (focusInList && state !== ComboboxState.INTERACTING) {

packages/components/src/Form/Inputs/InputChips/InputChipsBase.tsx

@@ -43,7 +43,7 @@ import { Chip } from '../../../Chip'
 import { inputHeight } from '../height'
 import { InputTextContent, InputText, InputTextBaseProps } from '../InputText'
 import { AdvancedInputControls } from '../AdvancedInputControls'
-import { useForkedRef, useWrapEvent } from '../../../utils'
+import { useForkedRef, useWrapEvent, getNextFocusTarget } from '../../../utils'
 import { visuallyHiddenStyle } from '../../../VisuallyHidden'
 
 export interface InputChipsInputControlProps {
@@ -295,9 +295,10 @@ export const InputChipsBaseInternal = forwardRef(
 
     function handleHiddenInputBlur(e: FocusEvent<HTMLInputElement>) {
       // Unless blur event is caused by clicking on a chip, deselect all chips
+      const nextFocusTarget = getNextFocusTarget(e)
       if (
-        e.relatedTarget &&
-        (e.relatedTarget as HTMLElement).parentNode !==
+        nextFocusTarget &&
+        (nextFocusTarget as HTMLElement).parentNode !==
           e.currentTarget.parentNode
       ) {
         deselectAll()

packages/components/src/utils/getNextFocusTarget.ts

@@ -0,0 +1,35 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2020 Looker Data Sciences, Inc.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+import { FocusEvent } from 'react'
+
+/**
+ * ONLY use for blur events, returns the “next focused element” – event.relatedTarget if available
+ * (modern browsers, where document.activeElement is not updated until after the blur event)
+ * and document.activeElement as a fallback (IE11, where it’s updated before the blur event).
+ * @param event the blur event
+ */
+export const getNextFocusTarget = (event?: FocusEvent) =>
+  event?.relatedTarget || document.activeElement

packages/components/src/utils/index.ts

@@ -24,6 +24,7 @@
 
  */
 
+export * from './getNextFocusTarget'
 export * from './getWindowedListBoundaries'
 export * from './HoverDisclosure'
 export * from './moveFocus'

playground/package.json

@@ -10,7 +10,7 @@
   },
   "private": true,
   "scripts": {
-    "start": "webpack-dev-server --host=0.0.0.0 --disable-host-check",
+    "start": "webpack serve --host=0.0.0.0 --disable-host-check",
     "analyze": "webpack --mode=production --profile"
   },
   "dependencies": {

playground/src/index.tsx

@@ -27,36 +27,35 @@ import React, { useState } from 'react'
 import { render } from 'react-dom'
 import {
   ComponentsProvider,
-  InputTimeSelect,
-  Card,
-  CardContent,
-  Heading,
+  FieldSelect,
+  FieldChips,
+  SpaceVertical,
 } from '@looker/components'
 import 'core-js/stable'
 
-const TimePlayground = () => {
-  const [value, setValue] = useState<string | undefined>('07:39')
-  const handleChange = (newVal?: string) => {
-    setValue(newVal)
-  }
+const App = () => {
+  const [values, setValues] = useState(['Cheddar', 'Gouda', 'Swiss'])
   return (
-    <>
-      <Heading>Selected: {value}</Heading>
-      <InputTimeSelect value={value} onChange={handleChange} />
-    </>
+    <ComponentsProvider loadGoogleFonts>
+      <SpaceVertical width={500} p="large">
+        <FieldSelect
+          label="Select value via click"
+          options={[
+            { label: 'Cheddar', value: 'cheddar' },
+            { label: 'Gouda', value: 'gouda' },
+            { label: 'Swiss', value: 'swiss' },
+          ]}
+        />
+        <FieldChips
+          label="Select current values"
+          description="Then focus out of the field. Confirm values are deselected."
+          values={values}
+          onChange={setValues}
+        />
+      </SpaceVertical>
+    </ComponentsProvider>
   )
 }
-
-const App = () => (
-  <ComponentsProvider loadGoogleFonts>
-    <Card m="large" maxWidth="500px">
-      <CardContent>
-        <TimePlayground />
-      </CardContent>
-    </Card>
-  </ComponentsProvider>
-)
-
 document.addEventListener('DOMContentLoaded', () => {
   render(<App />, document.getElementById('container'))
 })