Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Discover] JS warnings when opening the document flyout in Discover #202287

Open
gbamparop opened this issue Nov 29, 2024 · 9 comments
Open

[Discover] JS warnings when opening the document flyout in Discover #202287

gbamparop opened this issue Nov 29, 2024 · 9 comments
Assignees
Labels
bug Fixes for quality problems that affect the customer experience Feature:Discover Discover Application impact:high Addressing this issue will have a high level of impact on the quality/strength of our product. Team:DataDiscovery Discover, search (e.g. data plugin and KQL), data views, saved searches. For ES|QL, use Team:ES|QL.

Comments

@gbamparop
Copy link
Contributor

When opening the document flyout in Discover, the following warnings are displayed in the Console while running Kibana locally on the main branch.

The stack traces can be found below:

Warning: Each child in a list should have a unique "key" prop
hook.js:608 Warning: Each child in a list should have a unique "key" prop. See https://reactjs.org/link/warning-keys for more information. Error Component Stack
  at EuiI18n (<anonymous>)
  at div (<anonymous>)
  at nav (<anonymous>)
  at div (<anonymous>)
  at div (<anonymous>)
  at div (<anonymous>)
  at div (<anonymous>)
  at div (<anonymous>)
  at UnifiedDocViewerFlyout (doc_viewer_flyout.tsx:41:1)
  at Suspense (<anonymous>)
  at with_suspense.tsx:26:1
  at DiscoverGridFlyout (discover_grid_flyout.tsx:25:1)
  at Suspense (<anonymous>)
  at with_suspense.tsx:26:1
  at span (<anonymous>)
  at UnifiedDataTable (data_table.tsx:62:1)
  at DiscoverGrid (discover_grid.tsx:20:1)
  at CellActionsProvider (cell_actions_context.tsx:15:1)
  at div (<anonymous>)
  at div (<anonymous>)
  at DiscoverDocumentsComponent (discover_documents.tsx:73:1)
  at div (<anonymous>)
  at div (<anonymous>)
  at DropOverlayWrapper (drop_overlay_wrapper.tsx:28:1)
  at SingleDropInner (droppable.tsx:241:1)
  at div (<anonymous>)
  at DroppableImpl (droppable.tsx:56:1)
  at Droppable (droppable.tsx:34:1)
  at DiscoverMainContent (discover_main_content.tsx:39:1)
  at UnifiedHistogramLayout (layout.tsx:26:1)
  at container.tsx:35:1
  at Suspense (<anonymous>)
  at with_suspense.tsx:26:1
  at DiscoverHistogramLayout (discover_histogram_layout.tsx:33:1)
  at div (<anonymous>)
  at div (<anonymous>)
  at DiscoverResizableLayout (discover_resizable_layout.tsx:19:1)
  at div (<anonymous>)
  at div (<anonymous>)
  at div (<anonymous>)
  at DiscoverLayout (discover_layout.tsx:60:1)
  at ChildDragDropProvider (providers.tsx:211:1)
  at RootDragDropProvider (providers.tsx:138:1)
  at DiscoverMainApp (discover_main_app.tsx:26:1)
  at BaseAppWrapper (use_root_profile.tsx:49:1)
  at DiscoverMainProvider (discover_state_provider.tsx:44:1)
  at DiscoverMainRoute (discover_main_route.tsx:36:1)
  at Route (route.tsx:26:1)
  at Routes (routes.tsx:18:1)
  at DiscoverRoutes (discover_router.tsx:49:1)
  at Router (router.tsx:29:1)
  at Provider (context.tsx:43:1)
  at DiscoverRouter (discover_router.tsx:24:1)
  at I18nContext (i18n_service.tsx:36:1)
  at KibanaEuiProvider (eui_provider.tsx:56:1)
  at KibanaRootContextProvider (root_provider.tsx:34:1)
  at KibanaRenderContextProvider (render_provider.tsx:22:1)
Invalid DOM property `tabindex`. Did you mean `tabIndex`?
Warning: Invalid DOM property `tabindex`. Did you mean `tabIndex`? Error Component Stack
  at div (<anonymous>)
  at emotion-element-c39617d8.browser.esm.js:37:1
  at div (<anonymous>)
  at UI.js:13:1
  at FocusLockUI (Lock.js:13:1)
  at UI.js:8:1
  at EuiFocusTrapClass (focus_trap.js:34:1)
  at EuiFocusTrap (focus_trap.js:28:1)
  at EuiFlyoutWrapper (flyout.js:262:1)
  at flyout.js:43:1
  at flyout_resizable.js:23:1
  at emotion-element-c39617d8.browser.esm.js:37:1
  at EuiPortalClass (portal.js:39:1)
  at EuiPortal (portal.js:33:1)
  at UnifiedDocViewerFlyout (doc_viewer_flyout.tsx:41:1)
  at Suspense (<anonymous>)
  at ErrorBoundaryInternal (error_boundary.tsx:17:1)
  at KibanaErrorBoundary (error_boundary.tsx:78:1)
  at KibanaErrorBoundaryProvider (error_boundary_services.tsx:36:1)
  at with_suspense.tsx:26:1
  at DiscoverGridFlyout (discover_grid_flyout.tsx:25:1)
  at Suspense (<anonymous>)
  at ErrorBoundaryInternal (error_boundary.tsx:17:1)
  at KibanaErrorBoundary (error_boundary.tsx:78:1)
  at KibanaErrorBoundaryProvider (error_boundary_services.tsx:36:1)
  at with_suspense.tsx:26:1
  at span (<anonymous>)
  at UnifiedDataTable (data_table.tsx:62:1)
  at DiscoverGrid (discover_grid.tsx:20:1)
  at CellActionsProvider (cell_actions_context.tsx:15:1)
  at div (<anonymous>)
  at div (<anonymous>)
  at emotion-element-c39617d8.browser.esm.js:37:1
  at EuiFlexItemInternal (flex_item.js:18:1)
  at emotion-element-c39617d8.browser.esm.js:37:1
  at DiscoverDocumentsComponent (discover_documents.tsx:73:1)
  at div (<anonymous>)
  at emotion-element-c39617d8.browser.esm.js:37:1
  at EuiFlexGroupInternal (flex_group.js:22:1)
  at div (<anonymous>)
  at DropOverlayWrapper (drop_overlay_wrapper.tsx:28:1)
  at SingleDropInner (droppable.tsx:241:1)
  at div (<anonymous>)
  at DroppableImpl (droppable.tsx:56:1)
  at Droppable (droppable.tsx:34:1)
  at DiscoverMainContent (discover_main_content.tsx:39:1)
  at InPortal (index.js:96:1)
  at UnifiedHistogramLayout (layout.tsx:26:1)
  at container.tsx:35:1
  at Suspense (<anonymous>)
  at ErrorBoundaryInternal (error_boundary.tsx:17:1)
  at KibanaErrorBoundary (error_boundary.tsx:78:1)
  at KibanaErrorBoundaryProvider (error_boundary_services.tsx:36:1)
  at with_suspense.tsx:26:1
  at emotion-element-c39617d8.browser.esm.js:37:1
  at DiscoverHistogramLayout (discover_histogram_layout.tsx:33:1)
  at div (<anonymous>)
  at emotion-element-c39617d8.browser.esm.js:37:1
  at EuiPanel (panel.js:34:1)
  at div (<anonymous>)
  at InPortal (index.js:96:1)
  at DiscoverResizableLayout (discover_resizable_layout.tsx:19:1)
  at div (<anonymous>)
  at emotion-element-c39617d8.browser.esm.js:37:1
  at div (<anonymous>)
  at emotion-element-c39617d8.browser.esm.js:37:1
  at EuiPageBody (page_body.js:20:1)
  at div (<anonymous>)
  at emotion-element-c39617d8.browser.esm.js:37:1
  at EuiPage (page.js:20:1)
  at emotion-element-c39617d8.browser.esm.js:37:1
  at DiscoverLayout (discover_layout.tsx:60:1)
  at ChildDragDropProvider (providers.tsx:211:1)
  at RootDragDropProvider (providers.tsx:138:1)
  at DiscoverMainApp (discover_main_app.tsx:26:1)
  at BaseAppWrapper (use_root_profile.tsx:49:1)
  at DiscoverMainProvider (discover_state_provider.tsx:44:1)
  at DiscoverMainRoute (discover_main_route.tsx:36:1)
  at Route (react-router.js:614:1)
  at Route (route.tsx:26:1)
  at Switch (react-router.js:816:1)
  at Routes (routes.tsx:18:1)
  at DiscoverRoutes (discover_router.tsx:49:1)
  at RenderedRoute (index.js:494:1)
  at Routes (index.js:1055:1)
  at Router (index.js:993:1)
  at CompatRouter (index.js:985:1)
  at Router (react-router.js:233:1)
  at Router (router.tsx:29:1)
  at EuiErrorBoundary (error_boundary.js:31:1)
  at Provider (context.tsx:43:1)
  at DiscoverRouter (discover_router.tsx:24:1)
  at ErrorBoundaryInternal (error_boundary.tsx:17:1)
  at KibanaErrorBoundary (error_boundary.tsx:78:1)
  at KibanaErrorBoundaryProvider (error_boundary_services.tsx:36:1)
  at EuiContext (context.js:15:1)
  at IntlProvider (provider.js:31:1)
  at I18nProvider (provider.tsx:21:1)
  at I18nContext (i18n_service.tsx:36:1)
  at EuiComponentDefaultsProvider (component_defaults.js:27:1)
  at CurrentEuiBreakpointProvider (current_breakpoint.js:25:1)
  at ThemeProvider (emotion-element-c39617d8.browser.esm.js:100:1)
  at EuiEmotionThemeProvider (emotion.js:24:1)
  at EuiThemeMemoizedStylesProvider (style_memoization.js:20:1)
  at EuiThemeProvider (provider.js:33:1)
  at EuiSystemColorModeProvider (system_color_mode_provider.js:13:1)
  at EuiCacheProvider (cache_provider.js:13:1)
  at EuiProviderNestedCheck (nested_context.js:20:1)
  at EuiProvider (provider.js:26:1)
  at KibanaEuiProvider (eui_provider.tsx:56:1)
  at KibanaRootContextProvider (root_provider.tsx:34:1)
  at KibanaRenderContextProvider (render_provider.tsx:22:1)

Image

Image

@gbamparop gbamparop added bug Fixes for quality problems that affect the customer experience Feature:Discover Discover Application Team:DataDiscovery Discover, search (e.g. data plugin and KQL), data views, saved searches. For ES|QL, use Team:ES|QL. labels Nov 29, 2024
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-data-discovery (Team:DataDiscovery)

@kertal kertal added the impact:high Addressing this issue will have a high level of impact on the quality/strength of our product. label Nov 29, 2024
@kertal
Copy link
Member

kertal commented Dec 3, 2024

For me it seems the first error is coming from EuiPaginantion?

@kertal
Copy link
Member

kertal commented Dec 10, 2024

So, the tabindex Error is very easy to fix, just needs to be changed here:

the unique "key" prop is the opposite. when removing the pagination of the DocViewer it's gone ... but this can't be the solution of course, there might be some problem in the EUI component surfacing in this context

<EuiPagination
aria-label={i18n.translate('unifiedDocViewer.flyout.documentNavigation', {
defaultMessage: 'Document navigation',
})}
pageCount={pageCount}
activePage={activePage}
onPageClick={setPage}
compressed
data-test-subj="docViewerFlyoutNavigation"
/>

@kertal
Copy link
Member

kertal commented Dec 10, 2024

@jughosta confirmed , each child in a list should have a unique "key" prop is coming from EuiPagination, it's also surfacing when going to index management. Since there's no error here: https://eui.elastic.co/#/navigation/pagination, and I can't find any related issue/fix for this, dear @elastic/eui-team can you have a look? You just need to expand a document in a flyout in Discover ... you can quickly test this here if you want link

@kertal
Copy link
Member

kertal commented Dec 10, 2024

from our end @elastic/kibana-data-discovery , fixing the tabindex is a simple fix, and could close this issue, once it's clear how to proceed with the EuiPagination error

@weronikaolejniczak
Copy link
Contributor

@gbamparop @kertal I went ahead and created an issue for the key warning in EUI:

elastic/eui#8235

@kertal
Copy link
Member

kertal commented Dec 13, 2024

Thx @weronikaolejniczak , one update, I can't reproduce in index management for whatever reason ... my guess is that it's surfacing in Discover, because there's EuiPortal in use, and according to the error message Emotion is involved ... however, this is just a wild guess ..

Anyway the other error Warning: Each child in a list should have a unique "key" prop can and should be fixed on our end

@acstll
Copy link
Contributor

acstll commented Dec 16, 2024

@kertal quick status update: I figured the error is coming from EuiI18n inside the EuiPagination, but I still need to find out why it happens inside Discover. I have a hunch… but I need to do more testing. Hopefully I'll be able to push a PR with a fix soon.

I could also make a PR for the tabindex issue — would that be OK? afaik there isn't one yet.

@kertal
Copy link
Member

kertal commented Dec 16, 2024

@acstll my guess is .. there's some EuiPortal usage included .. great that you will have a fix soon 🥳

Sure thing, your help is very welcome, and it's a nice first issue to get your feet wet in Kibana code! I'll assign this issue to you 👍

acstll added a commit to acstll/eui that referenced this issue Dec 16, 2024
I was not able to reproduce the error outside Kibana, nor determine
the real cause of it, see elastic/kibana#202287
acstll added a commit to acstll/eui that referenced this issue Dec 17, 2024
I was not able to reproduce the error outside Kibana, nor determine
the real cause of it, see elastic/kibana#202287
acstll added a commit that referenced this issue Dec 17, 2024
Fixes one of the errors described in #202287 — namely a console warning
due to invalid DOM property.
kibanamachine pushed a commit to kibanamachine/kibana that referenced this issue Dec 17, 2024
Fixes one of the errors described in elastic#202287 — namely a console warning
due to invalid DOM property.

(cherry picked from commit 59826cc)
acstll added a commit to acstll/eui that referenced this issue Dec 17, 2024
I was not able to reproduce the error outside Kibana, nor determine
the real cause of it, see elastic/kibana#202287
stephmilovic pushed a commit that referenced this issue Dec 17, 2024
… (#204605)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Discover] Fix console warning for invalid DOM property
(#204417)](#204417)

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

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

<!--BACKPORT [{"author":{"name":"Arturo Castillo
Delgado","email":"arturo.castillo@elastic.co"},"sourceCommit":{"committedDate":"2024-12-17T15:49:36Z","message":"[Discover]
Fix console warning for invalid DOM property (#204417)\n\nFixes one of
the errors described in #202287 — namely a console warning\r\ndue to
invalid DOM
property.","sha":"59826ccdb55775261d2255d1483c40b3fbf60a21","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:DataDiscovery","backport:prev-minor","Feature:UnifiedDocViewer"],"title":"[Discover]
Fix console warning for invalid DOM
property","number":204417,"url":"https://github.com/elastic/kibana/pull/204417","mergeCommit":{"message":"[Discover]
Fix console warning for invalid DOM property (#204417)\n\nFixes one of
the errors described in #202287 — namely a console warning\r\ndue to
invalid DOM
property.","sha":"59826ccdb55775261d2255d1483c40b3fbf60a21"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/204417","number":204417,"mergeCommit":{"message":"[Discover]
Fix console warning for invalid DOM property (#204417)\n\nFixes one of
the errors described in #202287 — namely a console warning\r\ndue to
invalid DOM
property.","sha":"59826ccdb55775261d2255d1483c40b3fbf60a21"}}]}]
BACKPORT-->

Co-authored-by: Arturo Castillo Delgado <arturo.castillo@elastic.co>
JoseLuisGJ pushed a commit to JoseLuisGJ/kibana that referenced this issue Dec 19, 2024
Fixes one of the errors described in elastic#202287 — namely a console warning
due to invalid DOM property.
benakansara pushed a commit to benakansara/kibana that referenced this issue Jan 2, 2025
Fixes one of the errors described in elastic#202287 — namely a console warning
due to invalid DOM property.
acstll added a commit to acstll/eui that referenced this issue Jan 7, 2025
I was not able to reproduce the error outside Kibana, nor determine
the real cause of it, see elastic/kibana#202287
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Fixes for quality problems that affect the customer experience Feature:Discover Discover Application impact:high Addressing this issue will have a high level of impact on the quality/strength of our product. Team:DataDiscovery Discover, search (e.g. data plugin and KQL), data views, saved searches. For ES|QL, use Team:ES|QL.
Projects
None yet
Development

No branches or pull requests

5 participants