FIX: allows more precise placement strategy on mobile (#15171)

* FIX: allows more precise placement strategy on mobile

- default to absolute on mobile, fixed on desktop
- allows to set a global `placementStrategy` or a specific to each view `mobilePlacementStrategy` `desktopPlacementStrategy`

This is mainly used to allow a proper composer-actions positioning in mobile.

Note this commit also fixes a mouseDown event which could propagate quote-button event and cause the composer to close full screen on mobile

* mobile only

app/assets/javascripts/discourse/app/templates/components/composer-action-title.hbs

@@ -10,6 +10,9 @@
   post=model.post
   whisper=model.whisper
   noBump=model.noBump
+  options=(hash
+    mobilePlacementStrategy="fixed"
+  )
 }}
 
 <span class="action-title">

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

@@ -289,6 +289,9 @@ export default Component.extend(
       focusAfterOnChange: true,
       triggerOnChangeOnTab: true,
       autofocus: false,
+      placementStrategy: null,
+      mobilePlacementStrategy: null,
+      desktopPlacementStrategy: null,
     },
 
     autoFilterable: computed("content.[]", "selectKit.filter", function () {
@@ -849,36 +852,28 @@ export default Component.extend(
       }
 
       this.selectKit.mainElement().open = true;
-
       this.clearErrors();
-
-      const inModal = this.element.closest("#discourse-modal");
-
       this.selectKit.onOpen(event);
 
       if (!this.popper) {
+        const inModal = this.element.closest("#discourse-modal");
         const anchor = document.querySelector(
           `#${this.selectKit.uniqueID}-header`
         );
         const popper = document.querySelector(
           `#${this.selectKit.uniqueID}-body`
         );
-
-        const placementStrategy =
-          this.capabilities?.isIpadOS || this.site?.mobileView
-            ? "absolute"
-            : "fixed";
-        const verticalOffset = 3;
+        const strategy = this._computePlacementStrategy();
 
         this.popper = createPopper(anchor, popper, {
           eventsEnabled: false,
-          strategy: placementStrategy,
+          strategy,
           placement: this.selectKit.options.placement,
           modifiers: [
             {
               name: "offset",
               options: {
-                offset: [0, verticalOffset],
+                offset: [0, 3],
               },
             },
             {
@@ -888,7 +883,11 @@ export default Component.extend(
               fn({ state }) {
                 if (!inModal) {
                   let { x } = state.elements.reference.getBoundingClientRect();
-                  state.modifiersData.popperOffsets.x = -x + 10;
+                  if (strategy === "fixed") {
+                    state.modifiersData.popperOffsets.x = 0 + 10;
+                  } else {
+                    state.modifiersData.popperOffsets.x = -x + 10;
+                  }
                 }
               },
             },
@@ -1036,6 +1035,24 @@ export default Component.extend(
       this._deprecateOptions();
     },
 
+    _computePlacementStrategy() {
+      let placementStrategy = this.selectKit.options.placementStrategy;
+
+      if (placementStrategy) {
+        return placementStrategy;
+      }
+
+      if (this.capabilities?.isIpadOS || this.site?.mobileView) {
+        placementStrategy =
+          this.selectKit.options.mobilePlacementStrategy || "absolute";
+      } else {
+        placementStrategy =
+          this.selectKit.options.desktopPlacementStrategy || "fixed";
+      }
+
+      return placementStrategy;
+    },
+
     _deprecated(text) {
       const discourseSetup = document.getElementById("data-discourse-setup");
       if (

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

@@ -56,6 +56,10 @@ export default Component.extend(UtilsMixin, {
     }
   },
 
+  mouseDown() {
+    return false;
+  },
+
   click(event) {
     event.preventDefault();
     event.stopPropagation();