fix(ScrollView): avoid usage of useLayoutEffect during SSR (#2012)

* fix(ScrollView): added useLayoutEffect ssr fix * fix(ScrollView): changed aria test to use render instead of mount * chore: fix wrong element selection in cy test --------- Co-authored-by: Tobias Høegh <[email protected]>
dnbexperience · May 31, 2023 · 6246afc · 6246afc
1 parent c40d273
commit 6246afc
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/packages/dnb-design-system-portal/cypress/e2e/pageNavigation.cy.ts b/packages/dnb-design-system-portal/cypress/e2e/pageNavigation.cy.ts
@@ -34,7 +34,7 @@ describe('Page Navigation', () => {
     it('components page should include summary list of components', () => {
       cy.visitAsHtml('/uilib/components')
 
-      cy.get('h2').should('contain', 'Components')
+      cy.get('h1').should('contain', 'Components')
 
       cy.get('a[href="/uilib/components/accordion"]').should(
         'contain',

diff --git a/packages/dnb-eufemia/src/components/dialog/__tests__/Dialog.test.tsx b/packages/dnb-eufemia/src/components/dialog/__tests__/Dialog.test.tsx
@@ -406,7 +406,7 @@ describe('Dialog component snapshot', () => {
 })
 describe('Dialog aria', () => {
   it('should validate with ARIA rules as a dialog', async () => {
-    const Comp = mount(<Dialog {...props} openState={true} />)
+    const Comp = render(<Dialog {...props} openState={true} />)
     expect(await axeComponent(Comp)).toHaveNoViolations()
   })
 })

diff --git a/packages/dnb-eufemia/src/fragments/scroll-view/ScrollView.tsx b/packages/dnb-eufemia/src/fragments/scroll-view/ScrollView.tsx
@@ -13,6 +13,10 @@ import Context from '../../shared/Context'
 import { createSpacingClasses } from '../../components/space/SpacingHelper'
 import { SpacingProps } from '../../shared/types'
 
+// SSR warning fix: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
+const useLayoutEffect =
+  typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect
+
 export type ScrollViewProps = {
   /**
    * To make the content accessible to keyboard navigation. Use `true` or `auto`. Auto will detect if a scrollbar is visible and make the ScrollView accessible for keyboard navigation.
@@ -82,13 +86,13 @@ function useInteractive({ interactive, children, ref }) {
     Boolean(interactive)
   )
 
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     if (interactive === 'auto') {
       setAsInteractive(hasScrollbar())
     }
   }, [interactive, children]) // eslint-disable-line react-hooks/exhaustive-deps
 
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     if (interactive === 'auto' && typeof ResizeObserver !== 'undefined') {
       const observer = new ResizeObserver(() => {
         setAsInteractive(hasScrollbar())