[Discover] Set ownfocus to false when displaying the document flyout (#108646)

src/plugins/discover/public/application/components/discover_grid/constants.ts

@@ -17,6 +17,7 @@ export const gridStyle = {
 
 export const pageSizeArr = [25, 50, 100, 250];
 export const defaultPageSize = 100;
+export const defaultTimeColumnWidth = 190;
 export const toolbarVisibility = {
   showColumnSelector: {
     allowHide: false,

src/plugins/discover/public/application/components/discover_grid/discover_grid_columns.test.tsx

@@ -119,7 +119,7 @@ describe('Discover grid columns ', function () {
           ],
           "display": "Time (timestamp)",
           "id": "timestamp",
-          "initialWidth": 180,
+          "initialWidth": 190,
           "isSortable": true,
           "schema": "datetime",
         },

src/plugins/discover/public/application/components/discover_grid/discover_grid_columns.tsx

@@ -11,10 +11,11 @@ import { i18n } from '@kbn/i18n';
 import { EuiDataGridColumn, EuiScreenReaderOnly } from '@elastic/eui';
 import { ExpandButton } from './discover_grid_expand_button';
 import { DiscoverGridSettings } from './types';
-import { IndexPattern } from '../../../../../data/common/index_patterns/index_patterns';
+import type { IndexPattern } from '../../../../../data/common';
 import { buildCellActions } from './discover_grid_cell_actions';
 import { getSchemaByKbnType } from './discover_grid_schema';
 import { SelectButton } from './discover_grid_document_selection';
+import { defaultTimeColumnWidth } from './constants';
 
 export function getLeadControlColumns() {
   return [
@@ -88,7 +89,7 @@ export function buildEuiGridColumn(
 
   if (column.id === indexPattern.timeFieldName) {
     column.display = `${timeString} (${indexPattern.timeFieldName})`;
-    column.initialWidth = 180;
+    column.initialWidth = defaultTimeColumnWidth;
   }
   if (columnWidth > 0) {
     column.initialWidth = Number(columnWidth);

src/plugins/discover/public/application/components/discover_grid/discover_grid_flyout.tsx

@@ -107,6 +107,7 @@ export function DiscoverGridFlyout({
         size="m"
         data-test-subj="docTableDetailsFlyout"
         onKeyDown={onKeyDown}
+        ownFocus={false}
       >
         <EuiFlyoutHeader hasBorder>
           <EuiTitle
@@ -169,7 +170,7 @@ export function DiscoverGridFlyout({
               </EuiFlexItem>
             )}
             {activePage !== -1 && (
-              <EuiFlexItem>
+              <EuiFlexItem data-test-subj={`dscDocNavigationPage-${activePage}`}>
                 <EuiPagination
                   aria-label={i18n.translate('discover.grid.flyout.documentNavigation', {
                     defaultMessage: 'Document navigation',

test/functional/apps/discover/_data_grid_doc_table.ts

@@ -105,6 +105,16 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         });
       });
 
+      it('should allow paginating docs in the flyout by clicking in the doc table', async function () {
+        await retry.try(async function () {
+          await dataGrid.clickRowToggle({ rowIndex: rowToInspect - 1 });
+          await testSubjects.exists(`dscDocNavigationPage0`);
+          await dataGrid.clickRowToggle({ rowIndex: rowToInspect });
+          await testSubjects.exists(`dscDocNavigationPage1`);
+          await dataGrid.closeFlyout();
+        });
+      });
+
       it('should show allow adding columns from the detail panel', async function () {
         await retry.try(async function () {
           await dataGrid.clickRowToggle({ isAnchorRow: false, rowIndex: rowToInspect - 1 });