[Discover][DocViewer] Change logic. Add tests.

elastic · Apr 4, 2024 · 339c024 · 339c024
1 parent 6ccf117
commit 339c024
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 6 deletions.
diff --git a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.test.tsx b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.test.tsx
@@ -236,6 +236,21 @@ describe('Discover flyout', function () {
     expect(props.setExpandedDoc).not.toHaveBeenCalled();
   });
 
+  it('should not navigate with arrow keys through documents if an input is in focus', async () => {
+    mockFlyoutCustomization.Content = () => {
+      return <input data-test-subj="flyoutCustomInput" />;
+    };
+
+    const { component, props } = await mountComponent({});
+    findTestSubject(component, 'flyoutCustomInput').simulate('keydown', {
+      key: 'ArrowRight',
+    });
+    findTestSubject(component, 'flyoutCustomInput').simulate('keydown', {
+      key: 'ArrowLeft',
+    });
+    expect(props.setExpandedDoc).not.toHaveBeenCalled();
+  });
+
   it('should not render single/surrounding views for text based', async () => {
     const { component } = await mountComponent({
       query: { esql: 'FROM indexpattern' },

diff --git a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx
@@ -7,6 +7,7 @@
  */
 
 import React, { useMemo, useCallback } from 'react';
+import { get } from 'lodash';
 import { i18n } from '@kbn/i18n';
 import { css } from '@emotion/react';
 import type { DataView } from '@kbn/data-views-plugin/public';
@@ -99,6 +100,10 @@ export function DiscoverGridFlyout({
 
   const onKeyDown = useCallback(
     (ev: React.KeyboardEvent) => {
+      const nodeName = get(ev, 'target.nodeName', null);
+      if (typeof nodeName === 'string' && nodeName.toLowerCase() === 'input') {
+        return;
+      }
       if (ev.key === keys.ARROW_LEFT || ev.key === keys.ARROW_RIGHT) {
         ev.preventDefault();
         ev.stopPropagation();

diff --git a/src/plugins/unified_doc_viewer/public/components/doc_viewer_table/table.tsx b/src/plugins/unified_doc_viewer/public/components/doc_viewer_table/table.tsx
@@ -235,11 +235,6 @@ export const DocViewerTable = ({
     [storage]
   );
 
-  const handleKeyDown = useCallback((event) => {
-    // prevents the flyout keydown handler from being triggered in order to switch between data grid rows
-    event.stopPropagation();
-  }, []);
-
   const { pinnedItems, restItems } = Object.keys(flattened)
     .sort((fieldA, fieldB) => {
       const mappingA = mapping(fieldA);
@@ -421,7 +416,6 @@ export const DocViewerTable = ({
         <EuiFieldSearch
           aria-label={searchPlaceholder}
           fullWidth
-          onKeyDown={handleKeyDown}
           onChange={handleOnChange}
           placeholder={searchPlaceholder}
           value={searchText}