@aurodesignsystem-dev/auro-formkit 0.0.0-pr740.6 → 0.0.0-pr740.8

package/components/combobox/demo/api.min.js

@@ -3941,6 +3941,17 @@ class AuroDropdownBib extends i$2 {
         }
       }
     });
+
+    this.preventBodyScroll = this.preventBodyScroll.bind(this);
+    this.addEventListener('touchmove', this.preventBodyScroll, { passive: false });
+    this.addEventListener('touchstart', this.preventBodyScroll, { passive: false });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
+    this.removeEventListener('touchstart', this.preventBodyScroll, { passive: false });
   }
 
   firstUpdated(changedProperties) {
@@ -3956,6 +3967,19 @@ class AuroDropdownBib extends i$2 {
     }));
   }
 
+  /**
+   * Prevents scrolling of the body when touching empty areas of the component.
+   * @param {Event} event - The touchmove event.
+   * @returns {void}
+   */
+  preventBodyScroll(event) {
+    // when touchmove/touchstart on empty space
+    if (event.target === this) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     const classes = {
@@ -16180,7 +16204,7 @@ class AuroCombobox extends AuroElement$1 {
       // wait a frame in case the bib gets hide immediately after showing because there is no value
       setTimeout(() => {
         if (document.activeElement === this) {
-          this.focus();
+          this.setInputFocus();
         }
       }, 0);
     });
@@ -16199,13 +16223,24 @@ class AuroCombobox extends AuroElement$1 {
     this.hideBib = this.hideBib.bind(this);
     this.bibtemplate.addEventListener('close-click', this.hideBib);
 
-    this.focus = this.focus.bind(this);
+    this.setInputFocus = this.setInputFocus.bind(this);
     this.dropdown.addEventListener('auroDropdown-strategy-change', () => {
       // event when the strategy(bib mode) is changed between fullscreen and floating
-      setTimeout(this.focus, 0);
+      setTimeout(this.setInputFocus, 0);
     });
   }
 
+  /**
+   * @private
+   */
+  setInputFocus() {
+    if (this.dropdown.isBibFullscreen && this.dropdown.isPopoverVisible) {
+      this.inputInBib.focus();
+    } else {
+      this.input.focus();
+    }
+  }
+
   /**
    * Binds all behavior needed to the menu after rendering.
    * @private
@@ -16317,9 +16352,18 @@ class AuroCombobox extends AuroElement$1 {
     /**
      * Validate every time we remove focus from the datepicker.
      */
-    this.addEventListener('focusout', () => {
+    this.addEventListener('focusout', (event) => {
+      if (event.relatedTarget === event.target) {
+        // if the focus is moved within combobox, do nothing.
+        return;
+      }
       if (document.activeElement !== this) {
         this.validate();
+        if (this.dropdown.isPopoverVisible && this.dropdown.isBibFullscreen) {
+          event.preventDefault();
+          event.stopImmediatePropagation();
+          this.focus();
+        }
       }
     });
 
@@ -16495,10 +16539,8 @@ class AuroCombobox extends AuroElement$1 {
    * @returns {void}
    */
   focus() {
-    if (this.dropdown.isPopoverVisible && this.dropdown.isBibFullscreen) {
-      this.inputInBib.focus();
-    } else {
-      this.input.focus();
+    if (document.activeElement !== this) {
+      this.setInputFocus();
     }
   }
 

package/components/combobox/demo/index.min.js

@@ -3799,6 +3799,17 @@ class AuroDropdownBib extends i$2 {
         }
       }
     });
+
+    this.preventBodyScroll = this.preventBodyScroll.bind(this);
+    this.addEventListener('touchmove', this.preventBodyScroll, { passive: false });
+    this.addEventListener('touchstart', this.preventBodyScroll, { passive: false });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
+    this.removeEventListener('touchstart', this.preventBodyScroll, { passive: false });
   }
 
   firstUpdated(changedProperties) {
@@ -3814,6 +3825,19 @@ class AuroDropdownBib extends i$2 {
     }));
   }
 
+  /**
+   * Prevents scrolling of the body when touching empty areas of the component.
+   * @param {Event} event - The touchmove event.
+   * @returns {void}
+   */
+  preventBodyScroll(event) {
+    // when touchmove/touchstart on empty space
+    if (event.target === this) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     const classes = {
@@ -16038,7 +16062,7 @@ class AuroCombobox extends AuroElement$1 {
       // wait a frame in case the bib gets hide immediately after showing because there is no value
       setTimeout(() => {
         if (document.activeElement === this) {
-          this.focus();
+          this.setInputFocus();
         }
       }, 0);
     });
@@ -16057,13 +16081,24 @@ class AuroCombobox extends AuroElement$1 {
     this.hideBib = this.hideBib.bind(this);
     this.bibtemplate.addEventListener('close-click', this.hideBib);
 
-    this.focus = this.focus.bind(this);
+    this.setInputFocus = this.setInputFocus.bind(this);
     this.dropdown.addEventListener('auroDropdown-strategy-change', () => {
       // event when the strategy(bib mode) is changed between fullscreen and floating
-      setTimeout(this.focus, 0);
+      setTimeout(this.setInputFocus, 0);
     });
   }
 
+  /**
+   * @private
+   */
+  setInputFocus() {
+    if (this.dropdown.isBibFullscreen && this.dropdown.isPopoverVisible) {
+      this.inputInBib.focus();
+    } else {
+      this.input.focus();
+    }
+  }
+
   /**
    * Binds all behavior needed to the menu after rendering.
    * @private
@@ -16175,9 +16210,18 @@ class AuroCombobox extends AuroElement$1 {
     /**
      * Validate every time we remove focus from the datepicker.
      */
-    this.addEventListener('focusout', () => {
+    this.addEventListener('focusout', (event) => {
+      if (event.relatedTarget === event.target) {
+        // if the focus is moved within combobox, do nothing.
+        return;
+      }
       if (document.activeElement !== this) {
         this.validate();
+        if (this.dropdown.isPopoverVisible && this.dropdown.isBibFullscreen) {
+          event.preventDefault();
+          event.stopImmediatePropagation();
+          this.focus();
+        }
       }
     });
 
@@ -16353,10 +16397,8 @@ class AuroCombobox extends AuroElement$1 {
    * @returns {void}
    */
   focus() {
-    if (this.dropdown.isPopoverVisible && this.dropdown.isBibFullscreen) {
-      this.inputInBib.focus();
-    } else {
-      this.input.focus();
+    if (document.activeElement !== this) {
+      this.setInputFocus();
     }
   }
 

package/components/combobox/dist/auro-combobox.d.ts

@@ -332,10 +332,9 @@ export class AuroCombobox extends AuroElement {
     bibtemplate: any;
     inputInBib: any;
     /**
-     * Focuses the combobox trigger input.
-     * @returns {void}
+     * @private
      */
-    focus(): void;
+    private setInputFocus;
     /**
      * Binds all behavior needed to the menu after rendering.
      * @private
@@ -381,6 +380,11 @@ export class AuroCombobox extends AuroElement {
     firstUpdated(): void;
     dropdown: any;
     input: any;
+    /**
+     * Focuses the combobox trigger input.
+     * @returns {void}
+     */
+    focus(): void;
     /**
      * Resets component to initial state.
      * @returns {void}

package/components/combobox/dist/index.js

@@ -3730,6 +3730,17 @@ class AuroDropdownBib extends LitElement {
         }
       }
     });
+
+    this.preventBodyScroll = this.preventBodyScroll.bind(this);
+    this.addEventListener('touchmove', this.preventBodyScroll, { passive: false });
+    this.addEventListener('touchstart', this.preventBodyScroll, { passive: false });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
+    this.removeEventListener('touchstart', this.preventBodyScroll, { passive: false });
   }
 
   firstUpdated(changedProperties) {
@@ -3745,6 +3756,19 @@ class AuroDropdownBib extends LitElement {
     }));
   }
 
+  /**
+   * Prevents scrolling of the body when touching empty areas of the component.
+   * @param {Event} event - The touchmove event.
+   * @returns {void}
+   */
+  preventBodyScroll(event) {
+    // when touchmove/touchstart on empty space
+    if (event.target === this) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     const classes = {
@@ -15956,7 +15980,7 @@ class AuroCombobox extends AuroElement {
       // wait a frame in case the bib gets hide immediately after showing because there is no value
       setTimeout(() => {
         if (document.activeElement === this) {
-          this.focus();
+          this.setInputFocus();
         }
       }, 0);
     });
@@ -15975,13 +15999,24 @@ class AuroCombobox extends AuroElement {
     this.hideBib = this.hideBib.bind(this);
     this.bibtemplate.addEventListener('close-click', this.hideBib);
 
-    this.focus = this.focus.bind(this);
+    this.setInputFocus = this.setInputFocus.bind(this);
     this.dropdown.addEventListener('auroDropdown-strategy-change', () => {
       // event when the strategy(bib mode) is changed between fullscreen and floating
-      setTimeout(this.focus, 0);
+      setTimeout(this.setInputFocus, 0);
     });
   }
 
+  /**
+   * @private
+   */
+  setInputFocus() {
+    if (this.dropdown.isBibFullscreen && this.dropdown.isPopoverVisible) {
+      this.inputInBib.focus();
+    } else {
+      this.input.focus();
+    }
+  }
+
   /**
    * Binds all behavior needed to the menu after rendering.
    * @private
@@ -16093,9 +16128,18 @@ class AuroCombobox extends AuroElement {
     /**
      * Validate every time we remove focus from the datepicker.
      */
-    this.addEventListener('focusout', () => {
+    this.addEventListener('focusout', (event) => {
+      if (event.relatedTarget === event.target) {
+        // if the focus is moved within combobox, do nothing.
+        return;
+      }
       if (document.activeElement !== this) {
         this.validate();
+        if (this.dropdown.isPopoverVisible && this.dropdown.isBibFullscreen) {
+          event.preventDefault();
+          event.stopImmediatePropagation();
+          this.focus();
+        }
       }
     });
 
@@ -16271,10 +16315,8 @@ class AuroCombobox extends AuroElement {
    * @returns {void}
    */
   focus() {
-    if (this.dropdown.isPopoverVisible && this.dropdown.isBibFullscreen) {
-      this.inputInBib.focus();
-    } else {
-      this.input.focus();
+    if (document.activeElement !== this) {
+      this.setInputFocus();
     }
   }
 

package/components/combobox/dist/registered.js

@@ -3730,6 +3730,17 @@ class AuroDropdownBib extends LitElement {
         }
       }
     });
+
+    this.preventBodyScroll = this.preventBodyScroll.bind(this);
+    this.addEventListener('touchmove', this.preventBodyScroll, { passive: false });
+    this.addEventListener('touchstart', this.preventBodyScroll, { passive: false });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
+    this.removeEventListener('touchstart', this.preventBodyScroll, { passive: false });
   }
 
   firstUpdated(changedProperties) {
@@ -3745,6 +3756,19 @@ class AuroDropdownBib extends LitElement {
     }));
   }
 
+  /**
+   * Prevents scrolling of the body when touching empty areas of the component.
+   * @param {Event} event - The touchmove event.
+   * @returns {void}
+   */
+  preventBodyScroll(event) {
+    // when touchmove/touchstart on empty space
+    if (event.target === this) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     const classes = {
@@ -15956,7 +15980,7 @@ class AuroCombobox extends AuroElement {
       // wait a frame in case the bib gets hide immediately after showing because there is no value
       setTimeout(() => {
         if (document.activeElement === this) {
-          this.focus();
+          this.setInputFocus();
         }
       }, 0);
     });
@@ -15975,13 +15999,24 @@ class AuroCombobox extends AuroElement {
     this.hideBib = this.hideBib.bind(this);
     this.bibtemplate.addEventListener('close-click', this.hideBib);
 
-    this.focus = this.focus.bind(this);
+    this.setInputFocus = this.setInputFocus.bind(this);
     this.dropdown.addEventListener('auroDropdown-strategy-change', () => {
       // event when the strategy(bib mode) is changed between fullscreen and floating
-      setTimeout(this.focus, 0);
+      setTimeout(this.setInputFocus, 0);
     });
   }
 
+  /**
+   * @private
+   */
+  setInputFocus() {
+    if (this.dropdown.isBibFullscreen && this.dropdown.isPopoverVisible) {
+      this.inputInBib.focus();
+    } else {
+      this.input.focus();
+    }
+  }
+
   /**
    * Binds all behavior needed to the menu after rendering.
    * @private
@@ -16093,9 +16128,18 @@ class AuroCombobox extends AuroElement {
     /**
      * Validate every time we remove focus from the datepicker.
      */
-    this.addEventListener('focusout', () => {
+    this.addEventListener('focusout', (event) => {
+      if (event.relatedTarget === event.target) {
+        // if the focus is moved within combobox, do nothing.
+        return;
+      }
       if (document.activeElement !== this) {
         this.validate();
+        if (this.dropdown.isPopoverVisible && this.dropdown.isBibFullscreen) {
+          event.preventDefault();
+          event.stopImmediatePropagation();
+          this.focus();
+        }
       }
     });
 
@@ -16271,10 +16315,8 @@ class AuroCombobox extends AuroElement {
    * @returns {void}
    */
   focus() {
-    if (this.dropdown.isPopoverVisible && this.dropdown.isBibFullscreen) {
-      this.inputInBib.focus();
-    } else {
-      this.input.focus();
+    if (document.activeElement !== this) {
+      this.setInputFocus();
     }
   }
 

package/components/counter/demo/api.min.js

@@ -5650,6 +5650,17 @@ class AuroDropdownBib extends i$2 {
         }
       }
     });
+
+    this.preventBodyScroll = this.preventBodyScroll.bind(this);
+    this.addEventListener('touchmove', this.preventBodyScroll, { passive: false });
+    this.addEventListener('touchstart', this.preventBodyScroll, { passive: false });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
+    this.removeEventListener('touchstart', this.preventBodyScroll, { passive: false });
   }
 
   firstUpdated(changedProperties) {
@@ -5665,6 +5676,19 @@ class AuroDropdownBib extends i$2 {
     }));
   }
 
+  /**
+   * Prevents scrolling of the body when touching empty areas of the component.
+   * @param {Event} event - The touchmove event.
+   * @returns {void}
+   */
+  preventBodyScroll(event) {
+    // when touchmove/touchstart on empty space
+    if (event.target === this) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     const classes = {

package/components/counter/demo/index.min.js

@@ -5650,6 +5650,17 @@ class AuroDropdownBib extends i$2 {
         }
       }
     });
+
+    this.preventBodyScroll = this.preventBodyScroll.bind(this);
+    this.addEventListener('touchmove', this.preventBodyScroll, { passive: false });
+    this.addEventListener('touchstart', this.preventBodyScroll, { passive: false });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
+    this.removeEventListener('touchstart', this.preventBodyScroll, { passive: false });
   }
 
   firstUpdated(changedProperties) {
@@ -5665,6 +5676,19 @@ class AuroDropdownBib extends i$2 {
     }));
   }
 
+  /**
+   * Prevents scrolling of the body when touching empty areas of the component.
+   * @param {Event} event - The touchmove event.
+   * @returns {void}
+   */
+  preventBodyScroll(event) {
+    // when touchmove/touchstart on empty space
+    if (event.target === this) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     const classes = {

package/components/counter/dist/index.js

@@ -5603,6 +5603,17 @@ class AuroDropdownBib extends LitElement {
         }
       }
     });
+
+    this.preventBodyScroll = this.preventBodyScroll.bind(this);
+    this.addEventListener('touchmove', this.preventBodyScroll, { passive: false });
+    this.addEventListener('touchstart', this.preventBodyScroll, { passive: false });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
+    this.removeEventListener('touchstart', this.preventBodyScroll, { passive: false });
   }
 
   firstUpdated(changedProperties) {
@@ -5618,6 +5629,19 @@ class AuroDropdownBib extends LitElement {
     }));
   }
 
+  /**
+   * Prevents scrolling of the body when touching empty areas of the component.
+   * @param {Event} event - The touchmove event.
+   * @returns {void}
+   */
+  preventBodyScroll(event) {
+    // when touchmove/touchstart on empty space
+    if (event.target === this) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     const classes = {

package/components/counter/dist/registered.js

@@ -5603,6 +5603,17 @@ class AuroDropdownBib extends LitElement {
         }
       }
     });
+
+    this.preventBodyScroll = this.preventBodyScroll.bind(this);
+    this.addEventListener('touchmove', this.preventBodyScroll, { passive: false });
+    this.addEventListener('touchstart', this.preventBodyScroll, { passive: false });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
+    this.removeEventListener('touchstart', this.preventBodyScroll, { passive: false });
   }
 
   firstUpdated(changedProperties) {
@@ -5618,6 +5629,19 @@ class AuroDropdownBib extends LitElement {
     }));
   }
 
+  /**
+   * Prevents scrolling of the body when touching empty areas of the component.
+   * @param {Event} event - The touchmove event.
+   * @returns {void}
+   */
+  preventBodyScroll(event) {
+    // when touchmove/touchstart on empty space
+    if (event.target === this) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     const classes = {

package/components/datepicker/demo/api.min.js

@@ -17234,6 +17234,17 @@ class AuroDropdownBib extends i {
         }
       }
     });
+
+    this.preventBodyScroll = this.preventBodyScroll.bind(this);
+    this.addEventListener('touchmove', this.preventBodyScroll, { passive: false });
+    this.addEventListener('touchstart', this.preventBodyScroll, { passive: false });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
+    this.removeEventListener('touchstart', this.preventBodyScroll, { passive: false });
   }
 
   firstUpdated(changedProperties) {
@@ -17249,6 +17260,19 @@ class AuroDropdownBib extends i {
     }));
   }
 
+  /**
+   * Prevents scrolling of the body when touching empty areas of the component.
+   * @param {Event} event - The touchmove event.
+   * @returns {void}
+   */
+  preventBodyScroll(event) {
+    // when touchmove/touchstart on empty space
+    if (event.target === this) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     const classes = {

package/components/datepicker/demo/index.min.js

@@ -16975,6 +16975,17 @@ class AuroDropdownBib extends i {
         }
       }
     });
+
+    this.preventBodyScroll = this.preventBodyScroll.bind(this);
+    this.addEventListener('touchmove', this.preventBodyScroll, { passive: false });
+    this.addEventListener('touchstart', this.preventBodyScroll, { passive: false });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
+    this.removeEventListener('touchstart', this.preventBodyScroll, { passive: false });
   }
 
   firstUpdated(changedProperties) {
@@ -16990,6 +17001,19 @@ class AuroDropdownBib extends i {
     }));
   }
 
+  /**
+   * Prevents scrolling of the body when touching empty areas of the component.
+   * @param {Event} event - The touchmove event.
+   * @returns {void}
+   */
+  preventBodyScroll(event) {
+    // when touchmove/touchstart on empty space
+    if (event.target === this) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     const classes = {

package/components/datepicker/dist/index.js

@@ -16924,6 +16924,17 @@ class AuroDropdownBib extends LitElement {
         }
       }
     });
+
+    this.preventBodyScroll = this.preventBodyScroll.bind(this);
+    this.addEventListener('touchmove', this.preventBodyScroll, { passive: false });
+    this.addEventListener('touchstart', this.preventBodyScroll, { passive: false });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
+    this.removeEventListener('touchstart', this.preventBodyScroll, { passive: false });
   }
 
   firstUpdated(changedProperties) {
@@ -16939,6 +16950,19 @@ class AuroDropdownBib extends LitElement {
     }));
   }
 
+  /**
+   * Prevents scrolling of the body when touching empty areas of the component.
+   * @param {Event} event - The touchmove event.
+   * @returns {void}
+   */
+  preventBodyScroll(event) {
+    // when touchmove/touchstart on empty space
+    if (event.target === this) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     const classes = {

package/components/datepicker/dist/registered.js

@@ -16924,6 +16924,17 @@ class AuroDropdownBib extends LitElement {
         }
       }
     });
+
+    this.preventBodyScroll = this.preventBodyScroll.bind(this);
+    this.addEventListener('touchmove', this.preventBodyScroll, { passive: false });
+    this.addEventListener('touchstart', this.preventBodyScroll, { passive: false });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
+    this.removeEventListener('touchstart', this.preventBodyScroll, { passive: false });
   }
 
   firstUpdated(changedProperties) {
@@ -16939,6 +16950,19 @@ class AuroDropdownBib extends LitElement {
     }));
   }
 
+  /**
+   * Prevents scrolling of the body when touching empty areas of the component.
+   * @param {Event} event - The touchmove event.
+   * @returns {void}
+   */
+  preventBodyScroll(event) {
+    // when touchmove/touchstart on empty space
+    if (event.target === this) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     const classes = {

package/components/dropdown/demo/api.min.js

@@ -2914,6 +2914,17 @@ class AuroDropdownBib extends i {
         }
       }
     });
+
+    this.preventBodyScroll = this.preventBodyScroll.bind(this);
+    this.addEventListener('touchmove', this.preventBodyScroll, { passive: false });
+    this.addEventListener('touchstart', this.preventBodyScroll, { passive: false });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
+    this.removeEventListener('touchstart', this.preventBodyScroll, { passive: false });
   }
 
   firstUpdated(changedProperties) {
@@ -2929,6 +2940,19 @@ class AuroDropdownBib extends i {
     }));
   }
 
+  /**
+   * Prevents scrolling of the body when touching empty areas of the component.
+   * @param {Event} event - The touchmove event.
+   * @returns {void}
+   */
+  preventBodyScroll(event) {
+    // when touchmove/touchstart on empty space
+    if (event.target === this) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     const classes = {

package/components/dropdown/demo/index.min.js

@@ -2889,6 +2889,17 @@ class AuroDropdownBib extends i {
         }
       }
     });
+
+    this.preventBodyScroll = this.preventBodyScroll.bind(this);
+    this.addEventListener('touchmove', this.preventBodyScroll, { passive: false });
+    this.addEventListener('touchstart', this.preventBodyScroll, { passive: false });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
+    this.removeEventListener('touchstart', this.preventBodyScroll, { passive: false });
   }
 
   firstUpdated(changedProperties) {
@@ -2904,6 +2915,19 @@ class AuroDropdownBib extends i {
     }));
   }
 
+  /**
+   * Prevents scrolling of the body when touching empty areas of the component.
+   * @param {Event} event - The touchmove event.
+   * @returns {void}
+   */
+  preventBodyScroll(event) {
+    // when touchmove/touchstart on empty space
+    if (event.target === this) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     const classes = {

package/components/dropdown/dist/auro-dropdownBib.d.ts

@@ -62,6 +62,12 @@ export class AuroDropdownBib extends LitElement {
     get mobileFullscreenBreakpoint(): string;
     updated(changedProperties: any): void;
     bibTemplate: any;
+    /**
+     * Prevents scrolling of the body when touching empty areas of the component.
+     * @param {Event} event - The touchmove event.
+     * @returns {void}
+     */
+    preventBodyScroll(event: Event): void;
     firstUpdated(changedProperties: any): void;
     render(): import("lit-html").TemplateResult;
 }

package/components/dropdown/dist/index.js

@@ -2842,6 +2842,17 @@ class AuroDropdownBib extends LitElement {
         }
       }
     });
+
+    this.preventBodyScroll = this.preventBodyScroll.bind(this);
+    this.addEventListener('touchmove', this.preventBodyScroll, { passive: false });
+    this.addEventListener('touchstart', this.preventBodyScroll, { passive: false });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
+    this.removeEventListener('touchstart', this.preventBodyScroll, { passive: false });
   }
 
   firstUpdated(changedProperties) {
@@ -2857,6 +2868,19 @@ class AuroDropdownBib extends LitElement {
     }));
   }
 
+  /**
+   * Prevents scrolling of the body when touching empty areas of the component.
+   * @param {Event} event - The touchmove event.
+   * @returns {void}
+   */
+  preventBodyScroll(event) {
+    // when touchmove/touchstart on empty space
+    if (event.target === this) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     const classes = {

package/components/dropdown/dist/registered.js

@@ -2842,6 +2842,17 @@ class AuroDropdownBib extends LitElement {
         }
       }
     });
+
+    this.preventBodyScroll = this.preventBodyScroll.bind(this);
+    this.addEventListener('touchmove', this.preventBodyScroll, { passive: false });
+    this.addEventListener('touchstart', this.preventBodyScroll, { passive: false });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
+    this.removeEventListener('touchstart', this.preventBodyScroll, { passive: false });
   }
 
   firstUpdated(changedProperties) {
@@ -2857,6 +2868,19 @@ class AuroDropdownBib extends LitElement {
     }));
   }
 
+  /**
+   * Prevents scrolling of the body when touching empty areas of the component.
+   * @param {Event} event - The touchmove event.
+   * @returns {void}
+   */
+  preventBodyScroll(event) {
+    // when touchmove/touchstart on empty space
+    if (event.target === this) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     const classes = {

package/components/select/demo/api.min.js

@@ -3978,6 +3978,17 @@ class AuroDropdownBib extends i$2 {
         }
       }
     });
+
+    this.preventBodyScroll = this.preventBodyScroll.bind(this);
+    this.addEventListener('touchmove', this.preventBodyScroll, { passive: false });
+    this.addEventListener('touchstart', this.preventBodyScroll, { passive: false });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
+    this.removeEventListener('touchstart', this.preventBodyScroll, { passive: false });
   }
 
   firstUpdated(changedProperties) {
@@ -3993,6 +4004,19 @@ class AuroDropdownBib extends i$2 {
     }));
   }
 
+  /**
+   * Prevents scrolling of the body when touching empty areas of the component.
+   * @param {Event} event - The touchmove event.
+   * @returns {void}
+   */
+  preventBodyScroll(event) {
+    // when touchmove/touchstart on empty space
+    if (event.target === this) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     const classes = {

package/components/select/demo/index.min.js

@@ -3875,6 +3875,17 @@ class AuroDropdownBib extends i$2 {
         }
       }
     });
+
+    this.preventBodyScroll = this.preventBodyScroll.bind(this);
+    this.addEventListener('touchmove', this.preventBodyScroll, { passive: false });
+    this.addEventListener('touchstart', this.preventBodyScroll, { passive: false });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
+    this.removeEventListener('touchstart', this.preventBodyScroll, { passive: false });
   }
 
   firstUpdated(changedProperties) {
@@ -3890,6 +3901,19 @@ class AuroDropdownBib extends i$2 {
     }));
   }
 
+  /**
+   * Prevents scrolling of the body when touching empty areas of the component.
+   * @param {Event} event - The touchmove event.
+   * @returns {void}
+   */
+  preventBodyScroll(event) {
+    // when touchmove/touchstart on empty space
+    if (event.target === this) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     const classes = {

package/components/select/dist/index.js

@@ -3829,6 +3829,17 @@ class AuroDropdownBib extends LitElement {
         }
       }
     });
+
+    this.preventBodyScroll = this.preventBodyScroll.bind(this);
+    this.addEventListener('touchmove', this.preventBodyScroll, { passive: false });
+    this.addEventListener('touchstart', this.preventBodyScroll, { passive: false });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
+    this.removeEventListener('touchstart', this.preventBodyScroll, { passive: false });
   }
 
   firstUpdated(changedProperties) {
@@ -3844,6 +3855,19 @@ class AuroDropdownBib extends LitElement {
     }));
   }
 
+  /**
+   * Prevents scrolling of the body when touching empty areas of the component.
+   * @param {Event} event - The touchmove event.
+   * @returns {void}
+   */
+  preventBodyScroll(event) {
+    // when touchmove/touchstart on empty space
+    if (event.target === this) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     const classes = {

package/components/select/dist/registered.js

@@ -3829,6 +3829,17 @@ class AuroDropdownBib extends LitElement {
         }
       }
     });
+
+    this.preventBodyScroll = this.preventBodyScroll.bind(this);
+    this.addEventListener('touchmove', this.preventBodyScroll, { passive: false });
+    this.addEventListener('touchstart', this.preventBodyScroll, { passive: false });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
+    this.removeEventListener('touchstart', this.preventBodyScroll, { passive: false });
   }
 
   firstUpdated(changedProperties) {
@@ -3844,6 +3855,19 @@ class AuroDropdownBib extends LitElement {
     }));
   }
 
+  /**
+   * Prevents scrolling of the body when touching empty areas of the component.
+   * @param {Event} event - The touchmove event.
+   * @returns {void}
+   */
+  preventBodyScroll(event) {
+    // when touchmove/touchstart on empty space
+    if (event.target === this) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     const classes = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem-dev/auro-formkit",
-  "version": "0.0.0-pr740.6",
+  "version": "0.0.0-pr740.8",
   "description": "A collection of web components used to build forms.",
   "homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
   "bugs": {