@aurodesignsystem-dev/auro-formkit 0.0.0-pr740.7 → 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 = {
@@ -16329,6 +16353,10 @@ class AuroCombobox extends AuroElement$1 {
      * Validate every time we remove focus from the datepicker.
      */
     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) {

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 = {
@@ -16187,6 +16211,10 @@ class AuroCombobox extends AuroElement$1 {
      * Validate every time we remove focus from the datepicker.
      */
     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) {

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 = {
@@ -16105,6 +16129,10 @@ class AuroCombobox extends AuroElement {
      * Validate every time we remove focus from the datepicker.
      */
     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) {

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 = {
@@ -16105,6 +16129,10 @@ class AuroCombobox extends AuroElement {
      * Validate every time we remove focus from the datepicker.
      */
     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) {

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.7",
+  "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": {