What is the most idiomatic way to add a clear button to a multiselect combobox?

[csalmeida]

I have a portion of a form using a combobox that lists a few options. When options are selected they can be cleared by clicking the X handle button next to each chip element.

This works as expected, however, if say 10 items are selected it would be nice to have a way to clear them all in one go.
I have attempted to add a clear button that clears the input value and removes the chip elements from the DOM.

This approach results in an issue where once the chips are removed, they can no longer be selected again because my code does not adds the items back to the list.

Is there a way to clear all the elements in the combobox in one and have the items being added back into the list? 🙏

Related with #149

Here's a video that hopefully conveys what I mean, when the options are added and the combobox is cleared you will see that the list is no longer available:

CleanShot.2024-06-07.at.17.33.18.mp4

Ideally, it would be nice to be able to invoke this clear action from anywhere I want since the clear button sits next to the label markup, here's what I have:

<div class="<%= classes %>" data-controller="label-group">
    <div class="flex flex-row items-center justify-between gap-4">
      <% if label %>
          <%= form.label name.parameterize.underscore.to_sym, label, class: "block text-lg font-medium leading-6" %>
      <% end %>

          <button
            type="button"
            data-action="click->label-group#clear"
            class="gct-button-clear"
          >
            <span>Clear</span>
            <%= render "components/icons/trash", classes: "w-4 h-4" %>
          </button>

    </div>

  <div class="mt-2" data-label-group-target="content">
    <% # The combobox will be rendered here: %>
    <%= yield %>
  </div>

  <% # Descriptive text: %>
  <% if description %>
      <p class="mt-2 text-sm text-gray-500" id="<%= name %>-description"><%= description %></p>
  <% end %>


  <% # Error text: %>
  <% if errors && errors.size %>
    <% errors.each do |error| %>
        <p class="mt-2 text-sm text-red-600" id="<%= name %>-error">Error message would go here.</p>
    <% end %>
  <% end %>
</div>

Here's the Stimulus controller:

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["content"]

  /**
   * Clears the Hotwire combobox selection.
   * There's a hidden input field that stores values, and 
   * chip items that represent the selections on the front-end.
   */
  clear() {
    if (this.contentTarget) {
      const input = this.contentTarget.querySelector(`[id*="-hw-hidden-field"]`)
      const chips = this.contentTarget.querySelectorAll(`[data-hw-combobox-chip]`)

      if (input && chips) {
        // Clears hidden input values.
        input.value = ""

        // Removes selected chips so that the UI does not show any elements selected.
        chips.forEach(element => {
          element.remove()
        })
      }
    }
  }
}

[csalmeida]

This is a hacky solution but for now I managed to find the remove handlers for the chips and then simulate a click on each one of them which will trigger the _dispatchRemovalEvent event:

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["content"]

  /**
   * Clears the Hotwire combobox selection.
   * There's a hidden input field that stores values, and 
   * chip items that represent the selections on the front-end.
   */
  clear() {
    if (this.contentTarget) {
      const chip_remove_handlers = this.contentTarget.querySelectorAll(`.hw-combobox__chip__remover`)

      if (chip_remove_handlers) {
        // Removes selected chips so that the UI does not show any elements selected.
        chip_remove_handlers.forEach(element => {
          this.simulateClick(element)
        })
      }
    }
  }

  /**
   * Simulates a click programatically.
   * It was created with the intent to clear Hotwire Combobox chips.
   * @param {HTMLElement} element 
   */
  simulateClick(element) {
    const event = new MouseEvent("click", {
      view: window,
      bubbles: true,
      cancelable: true,
    });

    const cancelled = !element.dispatchEvent(event);
  
    if (cancelled) {
      // A handler called preventDefault.
    } else {
      // None of the handlers called preventDefault.
    }
  }
}

[josefarias]

Hey @csalmeida sorry about the radio silence here — I've been sitting with this one while I think of how to implement it.

I do think we'd want to support this somehow. But I'm not sure how yet. Lots of ways to go about it. Thanks for bearing with me here!

[csalmeida]

Hey @josefarias, thanks for taking the time to get to me.

No worries, it's good to know it's not supported officially yet, I haven't had too many issues with it and it was a nice surprise so see there's events available to clear the fields in the meantime. 🙏

[josefarias]

@csalmeida this will be available on the next release! If it's not too much trouble, I'd ask you to try out the latest on main and let me know if it works for you. Closing in the meantime. The PR contains an example of how you might use it: #193

[csalmeida]

Awesome, sounds good, I'll give it a go when I have a spare minute, thanks!