Define get/setter for is hidden property

Adds an extension point in case someone wants to override the default behaviour. This makes skipHiddenProperty unnecesary.
afcapel · Nov 14, 2021 · c2d3422 · c2d3422
1 parent 80f19d4
commit c2d3422
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -95,7 +95,6 @@ Events on the optional hidden input:
 
 * `min-length` set the minimum number of characters required to make an autocomplete request.
 * `submit-on-enter` submit the form after the autocomplete selection via enter keypress.
-* `skip-hidden-property` skip setting the `hidden` property on the element so that you can manually hide and show the element (by listening to the `toggle` event).
 * `data-autcomplete-selected-class` Stimulus Autocomplete adds a default `.active` class to the currently selected result. You can use another class instead of `.active` with the this attribute.
 * `data-autocomplete-label` can be used to define the input label upon selection. That way your option elements can have more elaborate markup, i.e.:
 

diff --git a/src/autocomplete.js b/src/autocomplete.js
@@ -11,13 +11,6 @@ export default class Autocomplete extends Controller {
     submitOnEnter: Boolean,
     url: String,
     minLength: Number,
-    /*
-     * Should we skip adding/removing the "hidden" property from resultsTarget?
-     *
-     * If set, you must listen to the "toggle" event from this
-     * controller to manually show/hide the results target.
-     */
-    skipHiddenProperty: Boolean,
   }
 
   connect() {
@@ -244,9 +237,7 @@ export default class Autocomplete extends Controller {
 
   open() {
     if (!this.isHidden) return
-    if (!this.hasSkipHiddenPropertyValue) {
-      this.resultsTarget.hidden = false
-    }
+
     this.isHidden = false
     this.element.setAttribute("aria-expanded", "true")
     this.element.dispatchEvent(
@@ -258,9 +249,7 @@ export default class Autocomplete extends Controller {
 
   close() {
     if (this.isHidden) return
-    if (!this.hasSkipHiddenPropertyValue) {
-      this.resultsTarget.hidden = true
-    }
+
     this.isHidden = true
     this.inputTarget.removeAttribute("aria-activedescendant")
     this.element.setAttribute("aria-expanded", "false")
@@ -271,6 +260,14 @@ export default class Autocomplete extends Controller {
     )
   }
 
+  get isHidden() {
+    return this.resultsTarget.hidden
+  }
+
+  set isHidden(value) {
+    this.resultsTarget.hidden = value
+  }
+
   get options() {
     return Array.from(this.resultsTarget.querySelectorAll(optionSelector))
   }