Switch focus back to search on filter popover close

elastic · Jul 28, 2023 · 2e07d31 · 2e07d31
1 parent a5f8827
commit 2e07d31
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 48 deletions.
diff --git a/src/plugins/presentation_util/public/components/field_picker/field_picker.tsx b/src/plugins/presentation_util/public/components/field_picker/field_picker.tsx
@@ -8,7 +8,7 @@
 
 import classNames from 'classnames';
 import { sortBy, uniq } from 'lodash';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { i18n } from '@kbn/i18n';
 import { FieldIcon } from '@kbn/react-field';
@@ -41,6 +41,7 @@ export const FieldPicker = ({
   selectableProps,
   ...other
 }: FieldPickerProps) => {
+  const [searchRef, setSearchRef] = useState<HTMLInputElement | null>(null);
   const [typesFilter, setTypesFilter] = useState<string[]>([]);
   const [fieldSelectableOptions, setFieldSelectableOptions] = useState<EuiSelectableOption[]>([]);
 
@@ -90,9 +91,14 @@ export const FieldPicker = ({
     [dataView, filterPredicate]
   );
 
+  const setFocusToSearch = useCallback(() => {
+    searchRef?.focus();
+  }, [searchRef]);
+
   const fieldTypeFilter = (
     <EuiFormRow fullWidth={true}>
       <FieldTypeFilter
+        setFocusToSearch={setFocusToSearch}
         onFieldTypesChange={(types) => setTypesFilter(types)}
         fieldTypesValue={typesFilter}
         availableFieldTypes={uniqueTypes}
@@ -128,6 +134,7 @@ export const FieldPicker = ({
           defaultMessage: 'Search field names',
         }),
         disabled: Boolean(selectableProps?.isLoading),
+        inputRef: setSearchRef,
       }}
       listProps={{
         isVirtualized: true,

diff --git a/src/plugins/presentation_util/public/components/field_picker/field_type_filter.tsx b/src/plugins/presentation_util/public/components/field_picker/field_type_filter.tsx
@@ -7,6 +7,7 @@
  */
 
 import React, { useState } from 'react';
+
 import { i18n } from '@kbn/i18n';
 import {
   EuiFilterGroup,
@@ -15,7 +16,6 @@ import {
   EuiInputPopover,
   EuiContextMenuPanel,
   EuiContextMenuItem,
-  EuiOutsideClickDetector,
   EuiFilterButton,
   EuiPopoverTitle,
   EuiFilterButtonProps,
@@ -25,15 +25,17 @@ import { FormattedMessage } from '@kbn/i18n-react';
 
 export interface Props {
   onFieldTypesChange: (value: string[]) => void;
-  fieldTypesValue: string[];
-  availableFieldTypes: string[];
   buttonProps?: Partial<EuiFilterButtonProps>;
+  setFocusToSearch: () => void;
+  availableFieldTypes: string[];
+  fieldTypesValue: string[];
 }
 
 export function FieldTypeFilter({
+  availableFieldTypes,
   onFieldTypesChange,
+  setFocusToSearch,
   fieldTypesValue,
-  availableFieldTypes,
   buttonProps,
 }: Props) {
   const [isPopoverOpen, setPopoverOpen] = useState(false);
@@ -61,48 +63,51 @@ export function FieldTypeFilter({
   );
 
   return (
-    <EuiOutsideClickDetector onOutsideClick={() => {}} isDisabled={!isPopoverOpen}>
-      <EuiFilterGroup fullWidth>
-        <EuiInputPopover
-          panelPaddingSize="none"
-          display="block"
-          isOpen={isPopoverOpen}
-          closePopover={() => {
-            setPopoverOpen(false);
-          }}
-          fullWidth
-          input={buttonContent}
-        >
-          <EuiPopoverTitle paddingSize="s">
-            {i18n.translate('presentationUtil.fieldSearch.filterByTypeLabel', {
-              defaultMessage: 'Filter by type',
-            })}
-          </EuiPopoverTitle>
-          <EuiContextMenuPanel
-            items={(availableFieldTypes as string[]).map((type) => (
-              <EuiContextMenuItem
-                key={type}
-                icon={fieldTypesValue.includes(type) ? 'check' : 'empty'}
-                data-test-subj={`typeFilter-${type}`}
-                onClick={() => {
-                  if (fieldTypesValue.includes(type)) {
-                    onFieldTypesChange(fieldTypesValue.filter((f) => f !== type));
-                  } else {
-                    onFieldTypesChange([...fieldTypesValue, type]);
-                  }
-                }}
-              >
-                <EuiFlexGroup gutterSize="xs" responsive={false}>
-                  <EuiFlexItem grow={false}>
-                    <FieldIcon type={type} label={type} />
-                  </EuiFlexItem>
-                  <EuiFlexItem>{type}</EuiFlexItem>
-                </EuiFlexGroup>
-              </EuiContextMenuItem>
-            ))}
-          />
-        </EuiInputPopover>
-      </EuiFilterGroup>
-    </EuiOutsideClickDetector>
+    <EuiFilterGroup fullWidth>
+      <EuiInputPopover
+        panelPaddingSize="none"
+        display="block"
+        isOpen={isPopoverOpen}
+        closePopover={() => {
+          setPopoverOpen(false);
+        }}
+        fullWidth
+        input={buttonContent}
+        // BLOCKED BY: https://github.com/elastic/eui/pull/6955
+        focusTrapProps={{
+          returnFocus: false, // we will be manually returning the focus to the search
+          onDeactivation: setFocusToSearch,
+        }}
+      >
+        <EuiPopoverTitle paddingSize="s">
+          {i18n.translate('presentationUtil.fieldSearch.filterByTypeLabel', {
+            defaultMessage: 'Filter by type',
+          })}
+        </EuiPopoverTitle>
+        <EuiContextMenuPanel
+          items={(availableFieldTypes as string[]).map((type) => (
+            <EuiContextMenuItem
+              key={type}
+              icon={fieldTypesValue.includes(type) ? 'check' : 'empty'}
+              data-test-subj={`typeFilter-${type}`}
+              onClick={() => {
+                if (fieldTypesValue.includes(type)) {
+                  onFieldTypesChange(fieldTypesValue.filter((f) => f !== type));
+                } else {
+                  onFieldTypesChange([...fieldTypesValue, type]);
+                }
+              }}
+            >
+              <EuiFlexGroup gutterSize="xs" responsive={false}>
+                <EuiFlexItem grow={false}>
+                  <FieldIcon type={type} label={type} />
+                </EuiFlexItem>
+                <EuiFlexItem>{type}</EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiContextMenuItem>
+          ))}
+        />
+      </EuiInputPopover>
+    </EuiFilterGroup>
   );
 }