Prevent input elements going under total bar or sticky header during …

…keyboard navigation.
Shopify · Feb 14, 2024 · 62241d7 · 62241d7
1 parent d33891e
commit 62241d7
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 3 deletions.
diff --git a/assets/quick-order-list.css b/assets/quick-order-list.css
@@ -47,7 +47,7 @@ quick-order-list input::placeholder {
   .quick-order-list__total {
     position: sticky;
     bottom: 0;
-    z-index: 1;
+    z-index: 2;
     background-color: rgb(var(--color-background));
   }
 

diff --git a/assets/quick-order-list.js b/assets/quick-order-list.js
@@ -72,6 +72,22 @@ class QuickOrderList extends HTMLElement {
     this.quickOrderListId = 'quick-order-list'
     this.variantItemStatusElement = document.getElementById('shopping-cart-variant-item-status');
     const form = this.querySelector('form');
+    this.inputFiledHeight = this.querySelector('.variant-item__quantity-wrapper').offsetHeight;
+    this.stickyHeaderElement = document.querySelector('sticky-header');
+
+    if (this.stickyHeaderElement) {
+      this.stickyHeader = {
+        height: this.stickyHeaderElement.offsetHeight,
+        type: `${this.stickyHeaderElement.getAttribute('data-sticky-type')}`
+      };
+    }
+
+    this.totalBarPosition = window.innerHeight - this.querySelector('.quick-order-list__total').offsetHeight;
+
+    window.addEventListener('resize', () => {
+      this.totalBarPosition = window.innerHeight - this.querySelector('.quick-order-list__total').offsetHeight;
+      this.stickyHeader.height = this.stickyHeaderElement ? this.stickyHeaderElement.offsetHeight: null;
+    });
 
     form.addEventListener('submit', this.onSubmit.bind(this));
     const debouncedOnChange = debounce((event) => {
@@ -189,6 +205,7 @@ class QuickOrderList extends HTMLElement {
     if (event.target.tagName !== 'INPUT') {
       return;
     }
+
     this.VariantListInput = event.target;
     this.VariantListInput.select()
     this.VariantListInput.addEventListener('keydown', (e) => {
@@ -200,14 +217,22 @@ class QuickOrderList extends HTMLElement {
         if (!e.shiftKey) {
           const nextIndex = currentIndex + 1;
           const nextVariant = this.allInputsArray[nextIndex] || this.allInputsArray[0];
-          nextVariant.focus();
+          nextVariant.select();
         } else {
           const previousIndex = currentIndex - 1;
           const previousVariant = this.allInputsArray[previousIndex] || this.allInputsArray[this.allInputsArray.length - 1];
-          previousVariant.focus();
+          previousVariant.select();
         }
       }
     });
+
+    const { bottom, top } = this.VariantListInput.getBoundingClientRect();
+    if (bottom > this.totalBarPosition ||
+      bottom < this.inputFiledHeight ||
+      (this.stickyHeaderElement && (this.stickyHeader.type !== 'on-scroll-up' && this.stickyHeader.height > top) ||
+      (this.stickyHeaderElement && this.stickyHeader.type === 'on-scroll-up' && this.stickyHeader.height > top && this.stickyHeaderElement.getBoundingClientRect().bottom > 0))) {
+      this.VariantListInput.scrollIntoView({ block: 'center', behavior: 'smooth' });
+    }
   }
 
   updateMultipleQty(items) {