DEV: toggle sk on click (#14243)

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

@@ -139,12 +139,6 @@ export default Component.extend(
       );
     },
 
-    click(event) {
-      if (this.selectKit.options.preventsClickPropagation) {
-        event.stopPropagation();
-      }
-    },
-
     _modifyComponentForRowWrapper(collection, item) {
       let component = this.modifyComponentForRow(collection, item);
       return component || "select-kit/select-kit-row";
@@ -196,10 +190,9 @@ export default Component.extend(
       this.handleDeprecations();
     },
 
-    didInsertElement() {
-      this._super(...arguments);
-
-      this.element.addEventListener("toggle", this.selectKit.toggle);
+    click(event) {
+      event.preventDefault();
+      event.stopPropagation();
     },
 
     willDestroyElement() {
@@ -211,8 +204,6 @@ export default Component.extend(
         this.popper.destroy();
         this.popper = null;
       }
-
-      this.element.removeEventListener("toggle", this.selectKit.toggle);
     },
 
     didReceiveAttrs() {
@@ -295,7 +286,6 @@ export default Component.extend(
       selectedNameComponent: "selected-name",
       selectedChoiceComponent: "selected-choice",
       castInteger: false,
-      preventsClickPropagation: false,
       focusAfterOnChange: true,
       triggerOnChangeOnTab: true,
       autofocus: false,
@@ -454,11 +444,8 @@ export default Component.extend(
         resolve(items);
       }).finally(() => {
         if (!this.isDestroying && !this.isDestroyed) {
-          if (
-            this.selectKit.options.closeOnChange &&
-            this.selectKit.mainElement()
-          ) {
-            this.selectKit.mainElement().open = false;
+          if (this.selectKit.options.closeOnChange) {
+            this.selectKit.close(event);
           }
 
           if (this.selectKit.options.focusAfterOnChange) {
@@ -828,6 +815,8 @@ export default Component.extend(
         return;
       }
 
+      this.selectKit.mainElement().open = false;
+
       this.clearErrors();
 
       const inModal = this.element.closest("#discourse-modal");
@@ -849,6 +838,8 @@ export default Component.extend(
         return;
       }
 
+      this.selectKit.mainElement().open = true;
+
       this.clearErrors();
 
       const inModal = this.element.closest("#discourse-modal");

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

@@ -60,7 +60,7 @@ export default Component.extend({
     }
 
     if (this.selectKit.mainElement()) {
-      this.selectKit.mainElement().open = false;
+      this.selectKit.close(event);
     }
   },
 });

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

@@ -73,7 +73,7 @@ export default Component.extend(UtilsMixin, {
 
     if (event.key === "Tab" && this.selectKit.isLoading) {
       this.selectKit.cancelSearch();
-      this.selectKit.mainElement().open = false;
+      this.selectKit.close(event);
       return true;
     }
 
@@ -92,7 +92,7 @@ export default Component.extend(UtilsMixin, {
     }
 
     if (event.key === "Escape") {
-      this.selectKit.mainElement().open = false;
+      this.selectKit.close(event);
       this.selectKit.headerElement().focus();
       return false;
     }

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

@@ -60,7 +60,10 @@ export default Component.extend(UtilsMixin, {
   },
 
   click(event) {
-    event.stopImmediatePropagation();
+    event.preventDefault();
+    event.stopPropagation();
+
+    this.selectKit.toggle(event);
   },
 
   keyUp(event) {
@@ -95,7 +98,7 @@ export default Component.extend(UtilsMixin, {
           return false;
         }
       } else {
-        this.selectKit.mainElement().open = false;
+        this.selectKit.close(event);
       }
     } else if (event.key === "ArrowUp") {
       event.stopPropagation();
@@ -103,7 +106,7 @@ export default Component.extend(UtilsMixin, {
       if (this.selectKit.isExpanded) {
         this.selectKit.highlightPrevious();
       } else {
-        this.selectKit.mainElement().open = true;
+        this.selectKit.open(event);
       }
       return false;
     } else if (event.key === "ArrowDown") {
@@ -111,17 +114,17 @@ export default Component.extend(UtilsMixin, {
       if (this.selectKit.isExpanded) {
         this.selectKit.highlightNext();
       } else {
-        this.selectKit.mainElement().open = true;
+        this.selectKit.open(event);
       }
       return false;
     } else if (event.key === " ") {
       event.stopPropagation();
       event.preventDefault(); // prevents the space to trigger a scroll page-next
-      this.selectKit.mainElement().open = true;
+      this.selectKit.open(event);
     } else if (event.key === "Escape") {
       event.stopPropagation();
       if (this.selectKit.isExpanded) {
-        this.selectKit.mainElement().open = false;
+        this.selectKit.close(event);
       } else {
         this.element.blur();
       }
@@ -139,7 +142,7 @@ export default Component.extend(UtilsMixin, {
       } else {
         if (this.isValidInput(event.key)) {
           this.selectKit.set("filter", event.key);
-          this.selectKit.mainElement().open = true;
+          this.selectKit.open(event);
           event.preventDefault();
           event.stopPropagation();
         }

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

@@ -139,7 +139,7 @@ export default Component.extend(UtilsMixin, {
       this.selectKit.mainElement()
     ) {
       if (!this.selectKit.mainElement().contains(event.relatedTarget)) {
-        this.selectKit.mainElement().open = false;
+        this.selectKit.close(event);
       }
     }
     return false;
@@ -188,7 +188,7 @@ export default Component.extend(UtilsMixin, {
         );
         return false;
       } else if (event.key === "Escape") {
-        this.selectKit.mainElement().open = false;
+        this.selectKit.close(event);
         this.selectKit.headerElement().focus();
       } else {
         if (this.isValidInput(event.key)) {

app/assets/javascripts/select-kit/addon/templates/components/topic-notifications-button.hbs

@@ -7,7 +7,6 @@
       options=(hash
         icon=icon
         showFullTitle=showFullTitle
-        preventsClickPropagation=true
         showCaret=showCaret
       )
     }}
@@ -21,7 +20,6 @@
     options=(hash
       icon=icon
       showFullTitle=showFullTitle
-      preventsClickPropagation=true
       showCaret=showCaret
     )
   }}