fix: #2391 Browse app page scrolling is disabled when not over app li…

…st (#2444)
reapit · Aug 24, 2020 · d11f2b2 · d11f2b2
1 parent 5ad5e61
commit d11f2b2
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 10 deletions.
diff --git a/packages/marketplace/src/components/pages/apps/__tests__/__snapshots__/apps.test.tsx.snap b/packages/marketplace/src/components/pages/apps/__tests__/__snapshots__/apps.test.tsx.snap
@@ -141,6 +141,7 @@ exports[`Client should match a snapshot when LOADING false 1`] = `
                 setComingSoonAppSectionHeight={[Function]}
               >
                 <div
+                  id="coming-soon-section"
                   style={
                     Object {
                       "minHeight": "100%",
@@ -519,6 +520,7 @@ exports[`Client should match a snapshot when LOADING false 2`] = `
                 setComingSoonAppSectionHeight={[Function]}
               >
                 <div
+                  id="coming-soon-section"
                   style={
                     Object {
                       "minHeight": "100%",

diff --git a/...s/marketplace/src/components/pages/apps/__tests__/__snapshots__/coming-soon.test.tsx.snap b/...s/marketplace/src/components/pages/apps/__tests__/__snapshots__/coming-soon.test.tsx.snap
@@ -2,6 +2,7 @@
 
 exports[`ComingSoonApps should match a snapshot 1`] = `
 <div
+  id="coming-soon-section"
   style={
     Object {
       "minHeight": "100%",

diff --git a/packages/marketplace/src/components/pages/apps/coming-soon.tsx b/packages/marketplace/src/components/pages/apps/coming-soon.tsx
@@ -34,23 +34,21 @@ const ComingSoonApps: React.FC<ComingSoonAppsProps> = ({ setComingSoonAppSection
   const comingSoonAppSectionRef = React.useRef<HTMLDivElement>(null)
 
   React.useLayoutEffect(() => {
-    const offsetHeight = comingSoonAppSectionRef.current?.offsetHeight
-    const clientHeight = comingSoonAppSectionRef.current?.clientHeight
-    const scrolHeight = comingSoonAppSectionRef.current?.scrollHeight
+    const offsetHeight = document.getElementById('coming-soon-section')?.offsetHeight
+    console.log('offsetHeight', offsetHeight)
 
-    const boundingClientRect = comingSoonAppSectionRef.current?.getBoundingClientRect()
-    console.log('boundingClientRect', boundingClientRect)
-
-    console.log(
-      `useLayoutEffect - ComingSoonApps component -> offsetHeight - ${offsetHeight} - clientHeight - ${clientHeight} - scrolHeight - ${scrolHeight}`,
-    )
     if (offsetHeight && setComingSoonAppSectionHeight) {
       setComingSoonAppSectionHeight(offsetHeight)
     }
+
+    console.log(
+      '---- coming soon boundingClientRect ----',
+      document.getElementById('coming-soon-section')?.getBoundingClientRect(),
+    )
   })
 
   return (
-    <div ref={comingSoonAppSectionRef} style={{ minHeight: '100%' }}>
+    <div id="coming-soon-section" ref={comingSoonAppSectionRef} style={{ minHeight: '100%' }}>
       <Grid isMultiLine>
         {comingSoonImagesList.map(imgSrc => (
           <GridThreeColItem key={imgSrc}>