From d3be77a0d160f33bef499039e22222b29881eaec Mon Sep 17 00:00:00 2001 From: Joffrey JAFFEUX Date: Fri, 3 Sep 2021 18:29:16 +0200 Subject: [PATCH] DEV: toggle sk on click (#14243) --- .../select-kit/addon/components/select-kit.js | 27 +++++++------------ .../components/select-kit/select-kit-body.js | 2 +- .../select-kit/select-kit-filter.js | 4 +-- .../select-kit/select-kit-header.js | 17 +++++++----- .../components/select-kit/select-kit-row.js | 4 +-- .../components/topic-notifications-button.hbs | 2 -- 6 files changed, 24 insertions(+), 32 deletions(-) diff --git a/app/assets/javascripts/select-kit/addon/components/select-kit.js b/app/assets/javascripts/select-kit/addon/components/select-kit.js index 35c75af79a7..5d02943c888 100644 --- a/app/assets/javascripts/select-kit/addon/components/select-kit.js +++ b/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"); diff --git a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-body.js b/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-body.js index 736de1d6f05..a6d75f83487 100644 --- a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-body.js +++ b/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); } }, }); diff --git a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-filter.js b/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-filter.js index 71eaf00ef5e..a59224bb6f5 100644 --- a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-filter.js +++ b/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; } diff --git a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-header.js b/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-header.js index 624f86e2946..a5d504bb039 100644 --- a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-header.js +++ b/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(); } diff --git a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-row.js b/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-row.js index cb860e66f8e..48c1259ad20 100644 --- a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-row.js +++ b/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)) { diff --git a/app/assets/javascripts/select-kit/addon/templates/components/topic-notifications-button.hbs b/app/assets/javascripts/select-kit/addon/templates/components/topic-notifications-button.hbs index 30b71a5fd1b..0d809a6df4c 100644 --- a/app/assets/javascripts/select-kit/addon/templates/components/topic-notifications-button.hbs +++ b/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 ) }}