Customisation not working when using combobox form helper
thanosbellos opened this issue · 3 comments
Describe the bug
Hi, first of all I want to say a big thanks a lot for all the effort and your work on this gem.
I have started using the gem with mostly async comboboxes. I am using the new feature that enables us to customise the attributes we pass on the components of the combobox. Everything works great when I use the combobox_tag helper. But when I use the form helper (i.e f.combobox) the customization block is being ignored. I believe that a possible fix may be to pass a block on the form helper too.
There the args and kwargs are forwarded to the hw_combobox_tag helper. Maybe if we also capture and pass a block it will work in the same way.
Here is how I use it and the result.
<%= combobox_tag :name, autocomplete_proposals_path, placeholder: "Choose title", name_when_new: "proposal[name]" do |combobox| %>
<% combobox.customize_input class: "w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-12 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm", data: {customized_input: ""} %>
<% combobox.customize_main_wrapper class: "!w-full mt-1" %>
<% combobox.customize_listbox class: "mt-1" %>
<% end %>
<%= f.combobox :client_id, organizations_path, value: f.object.client_id, placeholder: "Choose organization" do |combobox| %>
<% combobox.customize_input class: "w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-12 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm", data: {customized_input: ""} %>
<% combobox.customize_main_wrapper class: "!w-full mt-1" %>
<% combobox.customize_listbox class: "mt-1" %>
<% end %>
I can provide a dummy app if you need more information to reproduce the issue.
Also another question/sidenote can we also customize the wrapper of an option in a similar way? I followed the original discussion about the customisation but I couldn't find a way to pass some attributes to it (classes or data attributes to the rendered options).
@thanosbellos great catch! Thanks!
Form support added in #105, please point your gem to main until the next release to get it. Although that release should happen soon anyway.
Re: customizing options, I'm not sure how to implement that in a straightforward way since options can be loaded inline or asynchronously. It's possible, of course. But it's important to me that the code be simple.
One thing you could do is use :render_in to render the options. That way you're free to include any markup you like in the option – albeit not in the wrapping <li>. Would that work for you?
Thanks!
Closing for now as the form customization problem is fixed on main. But do let me know about that :render_in alternative.
Hi and sorry for the late reply.
Everything works greatly now using the form helper. Thanks a lot for the immediate fix!!
About the render_in:
I already use that to customize the view. That is great. The need to pass some custom class to the li that wraps the custom content comes from using tailwindcss. I wanted to add a group class (that unfortunately cannot be done using apply) in order to do some styling based on whether the li has a group class and aria-selected attribute using tailwind modifiers, i.e show a checkmark.
Tbf if i just had some way to have access to whether the list item is selected inside the custom view that i use in the render_in, i could make it work. Maybe that information would come handy in general as well.
Anyway i totally understand that this use case may be too much to ask and tbf the restrictions i have are mostly due to using only tailwind modifiers. I will find a way by writing some plain old css :)
Thanks a lot for your time and your efforts!!