FIX: ensures sk can be scrolled on iOS in a modal (#30164)

The modal was disabling body scroll lock and select-kit collection was not whitelisted which was preventing users to be able to scroll a select-kit collection on iOS.

app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-collection.hbs

@@ -1,5 +1,10 @@
 {{#if this.collection.content.length}}
-  <ul class="select-kit-collection" aria-live="polite" role="menu">
+  <ul
+    class="select-kit-collection"
+    aria-live="polite"
+    role="menu"
+    {{this.bodyScrollLock}}
+  >
     {{#each this.collection.content as |item index|}}
       {{component
         (component-for-row this.collection.identifier item this.selectKit)

app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-collection.js

@@ -1,5 +1,35 @@
 import Component from "@ember/component";
+import { service } from "@ember/service";
 import { tagName } from "@ember-decorators/component";
+import { modifier } from "ember-modifier";
+import {
+  disableBodyScroll,
+  enableBodyScroll,
+} from "discourse/lib/body-scroll-lock";
 
 @tagName("")
-export default class SelectKitCollection extends Component {}
+export default class SelectKitCollection extends Component {
+  @service site;
+
+  bodyScrollLock = modifier((element) => {
+    if (!this.site.mobileView) {
+      return;
+    }
+
+    // when opened a modal will disable all scroll but itself
+    // this code is whitelisting the collection to ensure it can be scrolled in this case
+    // however we only want to do this if the modal is open to avoid breaking the scroll on the page
+    // eg: opening a combobox under a topic shouldn't prevent you to scroll the topic page
+    const isModalOpen =
+      document.documentElement.classList.contains("modal-open");
+    if (!isModalOpen) {
+      return;
+    }
+
+    disableBodyScroll(element);
+
+    return () => {
+      enableBodyScroll(element);
+    };
+  });
+}