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

…0022) (#180129)

# Backport

This will backport the following commits from `main` to `8.13`:
- [[Discover][DocViewer] Fix keyboard events in search input
(#180022)](#180022)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Julia
Rechkunova","email":"julia.rechkunova@elastic.co"},"sourceCommit":{"committedDate":"2024-04-05T10:18:37Z","message":"[Discover][DocViewer]
Fix keyboard events in search input (#180022)\n\n- Closes
#180008
Summary\r\n\r\nThis PR fixes keyboard events in DocViewer flyout. Now
when the search\r\ninput is in focus, it would not trigger navigation
between docs.\r\n\r\n\r\n### Checklist\r\n\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [x] This was
checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"568b0f4806d2f6a64a0126d92d52b46d3c783ce2","branchLabelMapping":{"^v8.14.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:DataDiscovery","backport:prev-minor","Feature:UnifiedDocViewer","v8.14.0"],"title":"[Discover][DocViewer]
Fix keyboard events in search
input","number":180022,"url":"#180022
Fix keyboard events in search input (#180022)\n\n- Closes
#180008
Summary\r\n\r\nThis PR fixes keyboard events in DocViewer flyout. Now
when the search\r\ninput is in focus, it would not trigger navigation
between docs.\r\n\r\n\r\n### Checklist\r\n\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [x] This was
checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"568b0f4806d2f6a64a0126d92d52b46d3c783ce2"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.14.0","branchLabelMappingKey":"^v8.14.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/180022","number":180022,"mergeCommit":{"message":"[Discover][DocViewer]
Fix keyboard events in search input (#180022)\n\n- Closes
#180008
Summary\r\n\r\nThis PR fixes keyboard events in DocViewer flyout. Now
when the search\r\ninput is in focus, it would not trigger navigation
between docs.\r\n\r\n\r\n### Checklist\r\n\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [x] This was
checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"568b0f4806d2f6a64a0126d92d52b46d3c783ce2"}}]}]
BACKPORT-->

Co-authored-by: Julia Rechkunova <julia.rechkunova@elastic.co>

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();