Add `icon`, basically a `handle` on the left and hidden:on-load

[RickHPotter]

My use-case is pretty simple. I just wanted to have an icon on the left.

• _app/views/*.html.erb

    <div class="hw-cb w-1/2">
      <%= form.combobox :user_card_id, @user_cards, render_in: { partial: "user_card" }, placeholder: "Card" %>
    </div>

• _/app/assets/stylesheets/application.tailwind.css

  
  .hw-cb {
  .hw-combobox {
  @apply w-full;
  }
  
  .hw-combobox__main__wrapper {
  @apply w-full;
  @apply ps-10;
  @apply py-[10px];
  }
  
  .hw-combobox__icon {
  @apply absolute;
  @apply inset-y-0;
  @apply start-3.5;
  @apply ps-3.5;
  @apply flex;
  @apply items-center;
  }
  
  .hw-combobox__handle {
  @apply right-2;
  }
  
  .hw-combobox__input {
  @apply ps-2;
  @apply placeholder-gray-500;
  }
  
  .hw-combobox__listbox { }
  
  .hw-combobox__option:hover,
  .hw-combobox__option--navigated,
  .hw-combobox__option--selected {
  @apply bg-slate-600;
  @apply text-white;
  }
  
  --hw-icon-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' class='w-6 h-6'%3E%3Cpath d='M2.273 5.625A4.483 4.483 0 015.25 4.5h13.5c1.141 0 2.183.425 2.977 1.125A3 3 0 0018.75 3H5.25a3 3 0 00-2.977 2.625zM2.273 8.625A4.483 4.483 0 015.25 7.5h13.5c1.141 0 2.183.425 2.977 1.125A3 3 0 0018.75 6H5.25a3 3 0 00-2.977 2.625zM5.25 9a3 3 0 00-3 3v6a3 3 0 003 3h13.5a3 3 0 003-3v-6a3 3 0 00-3-3H15a.75.75 0 00-.75.75 2.25 2.25 0 01-4.5 0A.75.75 0 009 9H5.25z' /%3E%3C/svg%3E%0A");
  }

![image](https://github.com/josefarias/hotwire_combobox/assets/36988302/0c891a4a-51fe-4de7-ad4c-2b028fbe8e20)

I wanted to mimic the render_in with a partial to the svg, but decided on just mimicking the handle.

This is my first time messing with some Open Source Code, I'm open to criticism.

[josefarias]

Hey @RickHPotter thanks for this PR, too

So, the reason we have markup for the handle (meaning its wrapping <span> element) is so that we have a place to use stimulus actions to listen for clicks; since we're using the handle to clear the query when the combobox has been typed in.

This wasn't always the case! In previous versions, the handle used to be CSS-only, rendered in an unwrapped :after pseudo-element.

Similarly, I think this han be achieved with CSS only. So I'd like to avoid adding a space for it in the library until we decide we want such an icon in our default design, and/or there's a compelling general use case for it at the library level.

So, because this should be already achievable by using CSS (let me know if not! I might be missing something) — I'm chalking this up to a design concern, not a library one. Closing for now.

You've found your way quite well in the library for your first time doing open source. I'd encourage you to keep going!