[Discover][DocViewer] Fix keyboard events in search input (elastic#18…

…0022)

- Closes elastic#180008

## Summary

This PR fixes keyboard events in DocViewer flyout. Now when the search
input is in focus, it would not trigger navigation between docs.

### Checklist

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

(cherry picked from commit 568b0f4)

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' },

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';
@@ -98,6 +99,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();