onclick focus

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

Hide file tree

Showing 5 changed files with 29 additions and 8 deletions.
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -45,6 +45,7 @@
     "babel-plugin-styled-components": "^1.10.7",
     "body-scroll-lock": "^3.1.5",
     "dotenv": "^8.2.0",
+    "focus-trap": "^6.1.3",
     "framer-motion": "^2.7.6",
     "gatsby": "^2.20.7",
     "gatsby-image": "^2.3.1",

diff --git a/web/src/components/Cart/Cart.tsx b/web/src/components/Cart/Cart.tsx
@@ -108,7 +108,7 @@ const Cart: React.FC<Props> = ({ mainRef }) => {
   const [hasItems, quantity] = useQuantity()
   return (
     <>
-      <FocusLock>
+      <FocusLock persistentFocus={false}>
         <S.Cart
           className={`cart ${isCartOpen ? 'cart--open' : 'cart--closed'}`}
           id="cart"

diff --git a/web/src/components/Cart/LineItem/LineItem.tsx b/web/src/components/Cart/LineItem/LineItem.tsx
@@ -21,12 +21,6 @@ import StoreContext from '../../../context/StoreContext'
 
 const LineItem: React.FC<{ item: LineItem }> = ({ item }) => {
   const qtyRef = React.useRef<HTMLInputElement>(null)
-  // const element = qtyRef.current
-  // if (null !== element) {
-  //   element.focus({
-  //     preventScroll: true
-  //   })
-  // }
 
   const {
     removeLineItem,
@@ -48,6 +42,16 @@ const LineItem: React.FC<{ item: LineItem }> = ({ item }) => {
     updateLineItem(client, checkout.id, item.id, quantity)
   }
 
+  const focusInput = () => {
+    const element = qtyRef.current
+    if (null !== element) {
+      element.focus({
+        preventScroll: true
+      })
+      console.log('e clicked')
+    }
+  }
+
   // const handleTouch = (e: Event) => {
   //   e.preventDefault()
   // }
@@ -141,6 +145,7 @@ const LineItem: React.FC<{ item: LineItem }> = ({ item }) => {
               onChange={handleQuantityChange}
               value={quantity}
               ref={qtyRef}
+              onClick={focusInput}
             />
             <button
               className="btn-update"

diff --git a/web/src/components/Cart/styles.scss.tsx b/web/src/components/Cart/styles.scss.tsx
@@ -24,7 +24,7 @@ export const Cart = styled(Box)`
   opacity: 0;
   visibility: hidden;
   
-  position: absolute;
+  position: fixed;
   /* top: 0; */
   right: 0;
   bottom: 0;