[Quick Order List] Prevent selected inputs being covered by total bar…

… or header (#3278)

* Prevent input elements going under total bar or sticky header during keyboard navigation.

* Fix a typo

* Refactoring

* Increase z-index for volume pricing popup

assets/quantity-popover.css

@@ -17,7 +17,7 @@ quantity-popover volume-pricing li {
 
 .quantity-popover__info.global-settings-popup {
   width: 100%;
-  z-index: 2;
+  z-index: 3;
   position: absolute;
   background-color: rgb(var(--color-background));
   max-width: 36rem;
@@ -161,4 +161,4 @@ quantity-popover .quantity__rules .divider:nth-child(2)::before {
 quantity-popover .quantity__button:not(:focus-visible):not(.focused),
 quantity-popover .quantity__input:not(:focus-visible):not(.focused) {
   background-color: initial;
-}
+}

assets/quick-order-list.css

@@ -40,7 +40,7 @@ quick-order-list .quantity__button {
   .quick-order-list__total {
     position: sticky;
     bottom: 0;
-    z-index: 1;
+    z-index: 2;
     background-color: rgb(var(--color-background));
   }
 

assets/quick-order-list.js

@@ -70,6 +70,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.inputFieldHeight = 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) => {
@@ -202,14 +218,26 @@ 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 inputTopBorder = this.VariantListInput.getBoundingClientRect().top;
+    const inputBottomBorder = this.VariantListInput.getBoundingClientRect().bottom;
+    const stickyHeaderBottomBorder = this.stickyHeaderElement && this.stickyHeaderElement.getBoundingClientRect().bottom;
+    const totalBarCrossesInput = inputBottomBorder > this.totalBarPosition;
+    const inputOutsideOfViewPort = inputBottomBorder < this.inputFieldHeight;
+    const stickyHeaderCrossesInput = this.stickyHeaderElement && this.stickyHeader.type !== 'on-scroll-up' && this.stickyHeader.height > inputTopBorder;
+    const stickyHeaderScrollupCrossesInput = this.stickyHeaderElement && this.stickyHeader.type === 'on-scroll-up' && this.stickyHeader.height > inputTopBorder && stickyHeaderBottomBorder > 0;
+
+    if (totalBarCrossesInput || inputOutsideOfViewPort || stickyHeaderCrossesInput || stickyHeaderScrollupCrossesInput) {
+      this.VariantListInput.scrollIntoView({ block: 'center', behavior: 'smooth' });
+    }
   }
 
   updateMultipleQty(items) {