maybe fixes bitch ass fucking input jumping on ios

caseykennedy · Oct 19, 2020 · 3babd54 · 3babd54
1 parent 725b4a8
commit 3babd54
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 62 deletions.
diff --git a/web/src/components/Cart/Cart.tsx b/web/src/components/Cart/Cart.tsx
@@ -25,7 +25,7 @@ import LineItem from './LineItem'
 // ___________________________________________________________________
 
 type Props = {
-  mainRef?: React.RefObject<HTMLDivElement>
+  mainRef: React.RefObject<HTMLDivElement>
   // isPortalOpen: boolean
   // setPortalOpen: (arg0: boolean) => void
 }
@@ -108,59 +108,69 @@ const Cart: React.FC<Props> = ({ mainRef }) => {
   const [hasItems, quantity] = useQuantity()
   return (
     <>
-      <FocusLock persistentFocus={false}>
-        <S.Cart
-          className={`cart ${isCartOpen ? 'cart--open' : 'cart--closed'}`}
-          id="cart"
-          role="dialog"
-          aria-modal={true}
-          aria-labeledby="cart-modal"
-          tabIndex={-1}
-        >
-          <AnimatePresence>
-            {isCartOpen && (
-              <motion.div
-                initial={{
-                  opacity: 0,
-                  transform: theme.transform.matrix.from
-                }}
-                animate={{ opacity: 1, transform: theme.transform.matrix.to }}
-                exit={{ opacity: 0, transform: theme.transform.matrix.from }}
-                transition={{ duration: 0.5 }}
-                style={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  height: '100%'
-                }}
-                ref={scrollRef}
-              >
-                <>
-                  {/* <div className="cart__veil" /> */}
-                  <div className="cart__utilities">
-                    <Text color="darkgray">Your cart</Text>
-                    <Text
-                      as="button"
-                      onClick={togglePortal}
-                      className="close-cart"
-                      aria-label="close cart"
-                      data-dismiss="modal"
-                      ref={exitRef}
-                    >
-                      {/* <Icon name="plus" color="black" /> */}
-                      close
-                    </Text>
-                  </div>
-                  <CartItems
-                    adding={adding}
-                    checkout={checkout}
-                    scrollRef={scrollRef}
-                  />
-                </>
-              </motion.div>
-            )}
-          </AnimatePresence>
-        </S.Cart>
-      </FocusLock>
+      <Portal
+        id="cart-root"
+        root="main-root"
+        isOpen={isCartOpen}
+        handleExit={() => setCartOpen(false)}
+        scrollRef={scrollRef}
+        mainRef={mainRef}
+        exitRef={exitRef}
+      >
+        <FocusLock persistentFocus={false}>
+          <S.Cart
+            className={`cart ${isCartOpen ? 'cart--open' : 'cart--closed'}`}
+            id="cart"
+            role="dialog"
+            aria-modal={true}
+            aria-label="cart-modal"
+            tabIndex={-1}
+          >
+            <AnimatePresence>
+              {isCartOpen && (
+                <motion.div
+                  initial={{
+                    opacity: 0,
+                    transform: theme.transform.matrix.from
+                  }}
+                  animate={{ opacity: 1, transform: theme.transform.matrix.to }}
+                  exit={{ opacity: 0, transform: theme.transform.matrix.from }}
+                  transition={{ duration: 0.5 }}
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%'
+                  }}
+                  ref={scrollRef}
+                >
+                  <>
+                    {/* <div className="cart__veil" /> */}
+                    <div className="cart__utilities">
+                      <Text color="darkgray">Your cart</Text>
+                      <Text
+                        as="button"
+                        onClick={togglePortal}
+                        className="close-cart"
+                        aria-label="close cart"
+                        data-dismiss="modal"
+                        ref={exitRef}
+                      >
+                        {/* <Icon name="plus" color="black" /> */}
+                        close
+                      </Text>
+                    </div>
+                    <CartItems
+                      adding={adding}
+                      checkout={checkout}
+                      scrollRef={scrollRef}
+                    />
+                  </>
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </S.Cart>
+        </FocusLock>
+      </Portal>
     </>
   )
 }

diff --git a/web/src/components/Cart/LineItem/LineItem.tsx b/web/src/components/Cart/LineItem/LineItem.tsx
@@ -48,7 +48,7 @@ const LineItem: React.FC<{ item: LineItem }> = ({ item }) => {
       element.focus({
         preventScroll: true
       })
-      console.log('e clicked')
+      console.log('should focus input')
     }
   }
 

diff --git a/web/src/components/Cart/styles.scss.tsx b/web/src/components/Cart/styles.scss.tsx
@@ -23,24 +23,27 @@ export const Cart = styled(Box)`
   backdrop-filter: blur(9px);
   opacity: 0;
   visibility: hidden;
-  
-  position: fixed;
-  /* top: 0; */
+
+  position: absolute;
+  top: 0;
   right: 0;
   bottom: 0;
 
   z-index: 9999;
   transition: ${theme.transition.all};
 
-  /* overflow: auto;
-  -webkit-overflow-scrolling: touch; */
+  overflow: scroll;
+  -webkit-overflow-scrolling: touch;
 
   @media ${theme.mq.tablet} {
     border-left: ${theme.border};
     opacity: 0;
     visibility: hidden;
 
-    left: auto;
+    position: fixed;
+    top: ${theme.headerHeight};
+    right: 0;
+    bottom: 0;
     padding: ${theme.space[5]};
     height: calc(100% - ${theme.headerHeight});
     width: ${cartWidth};

diff --git a/web/src/components/Header/Header.tsx b/web/src/components/Header/Header.tsx
@@ -142,7 +142,7 @@ const Header: React.FC<HeaderShape> = ({ mainRef }) => {
           <Icon name="bag" color="black" />
         </S.CartToggle>
       </S.Header>
-      <Cart />
+      <Cart mainRef={mainRef} />
     </>
   )
 }

diff --git a/web/src/styles/global.ts b/web/src/styles/global.ts
@@ -16,6 +16,14 @@ const GlobalStyles = createGlobalStyle`
   ${RootVars}
   ${Reset}
   ${Typography}
+
+  html,
+  body {
+    height: 100%;
+    width: 100%;
+    overflow: auto;
+    -webkit-overflow-scrolling: auto
+  }
   
   body {
     background: ${theme.colors.secondary};