From 97e593bfbf8a8f71edb0cb63e5bbff8244ffac66 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Mon, 9 Dec 2024 00:53:22 +0100
Subject: [PATCH] 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.
---
 .../select-kit/select-kit-collection.hbs      |  7 +++-
 .../select-kit/select-kit-collection.js       | 32 ++++++++++++++++++-
 2 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-collection.hbs b/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-collection.hbs
index d52ec3e195d..9c45720672a 100644
--- a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-collection.hbs
+++ b/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)
diff --git a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-collection.js b/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-collection.js
index 7c21ad8a61f..232ba39d9cf 100644
--- a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-collection.js
+++ b/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);
+    };
+  });
+}