diff --git a/src/plugins/discover/public/application/components/discover_grid/discover_grid_flyout.test.tsx b/src/plugins/discover/public/application/components/discover_grid/discover_grid_flyout.test.tsx
index 63d16af7de478..60841799b1398 100644
--- a/src/plugins/discover/public/application/components/discover_grid/discover_grid_flyout.test.tsx
+++ b/src/plugins/discover/public/application/components/discover_grid/discover_grid_flyout.test.tsx
@@ -143,4 +143,24 @@ describe('Discover flyout', function () {
expect(props.setExpandedDoc).toHaveBeenCalledTimes(1);
expect(props.setExpandedDoc.mock.calls[0][0]._id).toBe('4');
});
+
+ it('allows navigating with arrow keys through documents', () => {
+ const props = getProps();
+ const component = mountWithIntl();
+ findTestSubject(component, 'docTableDetailsFlyout').simulate('keydown', { key: 'ArrowRight' });
+ expect(props.setExpandedDoc).toHaveBeenCalledWith(expect.objectContaining({ _id: '2' }));
+ component.setProps({ ...props, hit: props.hits[1] });
+ findTestSubject(component, 'docTableDetailsFlyout').simulate('keydown', { key: 'ArrowLeft' });
+ expect(props.setExpandedDoc).toHaveBeenCalledWith(expect.objectContaining({ _id: '1' }));
+ });
+
+ it('should not navigate with keypresses when already at the border of documents', () => {
+ const props = getProps();
+ const component = mountWithIntl();
+ findTestSubject(component, 'docTableDetailsFlyout').simulate('keydown', { key: 'ArrowLeft' });
+ expect(props.setExpandedDoc).not.toHaveBeenCalled();
+ component.setProps({ ...props, hit: props.hits[props.hits.length - 1] });
+ findTestSubject(component, 'docTableDetailsFlyout').simulate('keydown', { key: 'ArrowRight' });
+ expect(props.setExpandedDoc).not.toHaveBeenCalled();
+ });
});
diff --git a/src/plugins/discover/public/application/components/discover_grid/discover_grid_flyout.tsx b/src/plugins/discover/public/application/components/discover_grid/discover_grid_flyout.tsx
index 3894127891041..aaae9afe6531a 100644
--- a/src/plugins/discover/public/application/components/discover_grid/discover_grid_flyout.tsx
+++ b/src/plugins/discover/public/application/components/discover_grid/discover_grid_flyout.tsx
@@ -21,6 +21,7 @@ import {
EuiPortal,
EuiPagination,
EuiHideFor,
+ keys,
} from '@elastic/eui';
import { DocViewer } from '../doc_viewer/doc_viewer';
import { IndexPattern } from '../../../kibana_services';
@@ -87,9 +88,25 @@ export function DiscoverGridFlyout({
[hits, setExpandedDoc]
);
+ const onKeyDown = useCallback(
+ (ev: React.KeyboardEvent) => {
+ if (ev.key === keys.ARROW_LEFT || ev.key === keys.ARROW_RIGHT) {
+ ev.preventDefault();
+ ev.stopPropagation();
+ setPage(activePage + (ev.key === keys.ARROW_RIGHT ? 1 : -1));
+ }
+ },
+ [activePage, setPage]
+ );
+
return (
-
+