Add datalist_tag to create datalist form elements

[willianveiga]

Motivation / Background

In order to generate an HTML datalist element with Rails I needed the following code:

<%= content_tag(:datalist, nil, id: :payees_datalist, 'data-autocomplete-input-target' => :datalist) do %>
  <% @payees.each do |payee| %>
    <%=
      content_tag(
        :option,
        nil,
        value: payee.name,
        data: { id: payee.id },
        'data-autocomplete-input-target' => 'datalistOption'
      )
    %>
  <% end %>
<% end %>

It would be great to have a simple way to do that.

Detail

This Pull Request adds datalist_tag:

  datalist_tag('countries_datalist', ['Argentina', ['Brazil', { class: 'brazilian_option' }],
               ['Chile', 'CL', { disabled: true }]], { class: 'sa-countries-sample' })

  => <datalist id="countries_datalist" class="sa-countries-sample">
       <option value="Argentina">Argentina</option>
       <option value="Brazil" class="brazilian_option">Brazil</option>
       <option value="CL" disabled="disabled">Chile</option>
     </datalist>

[zzak]

First time of even hearing of this tag, is it common enough that every Rails application could use it?

[willianveiga]

To be honest, this is the first time I've used it. Looking for a method to generate it in the documentation/API was natural, but I could not find a solution there.

Datalist is a simple native alternative for JavaScript solutions like Select2. Not perfect, but good enough.

Rails has many methods to generate standard HTML form elements. I'd be glad to find a solution for datalists as well.

[andresakata]

First time of even hearing of this tag, is it common enough that every Rails application could use it?

Is there any guidance about what kind of tags are expected to have view helpers?

[skipkayhil]

Note: you can also use tag.datalist:

rails/actionview/lib/action_view/helpers/tag_helper.rb

Line 145 in 5ef7f73

define_element :datalist, code_generator: code_generator

(this won't include special option handling)

I think initially I was also unsure about the usefulness of a new tag, but handling option arrays/hashes like select_tag does seem like a good thing

[willianveiga]

Thanks, @skipkayhil. I was not aware of these tag.html_tag_here methods.

The equivalent code with tag.datalist to the example above is the following:

tag.datalist(
  options_for_select(
    ['Argentina', ['Brazil', { class: 'brazilian_option' }], ['Chile', 'CL', { disabled: true }]]
  ),
  id: 'countries_datalist', class: 'sa-countries-sample'
)

Shorter, but still not a natural interface. What do you guys think?

Thanks.

[MatheusRich]

@zzak for what it's worth, I've seen it being used a handful of times on my client projects. I'm not sure if that is enough to justify a specialized helper, given that's possible to write something with tag.datalist currently.

[zzak]

I'm not convinced this meets the criteria to be included in Rails, but will defer to other members.

Please feel free to post your PR on discord if you don't get any other feedback in some time.

[willianveiga]

What is the criteria to be included, @zzak ? This is probably related to @andresakata's question.

I'll wait for a while and ping it there if needed. Thanks!

[zzak]

Is there any guidance about what kind of tags are expected to have view helpers?

I would guess that new view helpers are not added often, the most recent ones I can think of are the video_tag and audio_tag added around when Active Storage came in. Feel free to find other data points to make your case.

What is the criteria to be included?

This is just based on my experience, not my decision, but it hopefully gives you some idea of expectations. Your experience may be different from mine.

I wish the criteria for a new feature was a bit more explicit, but something to aim for:

• Be something that almost every Rails app can benefit from
• Provide an API that meets the standards of the core team

Usually if one of those is true, you will get feedback on the other. e.g. if the idea is solid but the API needs work, or if it seems like a nice feature but who is it for?

Being able to promote your idea is important, and I would say this example is maybe not sufficient:

• Saves a few lines of code with this one method call

Who does it save that code for? Is it only being used in rare occasions, or is it being called everywhere?

Sorry that is kind of a brain dump.

[willianveiga]

Thanks for clarifying, @zzak.

Rethinking about the things you said and the proposed feature, I'd say:

• The datalist is a native form element and can be used without JavaScript. Developers can use it to replace libraries like Select2, which are heavily dependent on JavaScript. Hotwire has introduced a different approach where JavaScript is less used. Adding a good interface to generate datalist elements would help with that.
• This PR adds a similar interface to select/options_for_select. Developers familiar with those methods should have a good experience.
• The Rails Guide and the documentation are good friends, specially for new Rails developers. I have opened both to search for datalist without success. I was expecting to find some helper method to generate it. Probably many people do the same and have the same experience.
• We have had previous attempts to add it: Added #datalist_field_tag to ActionView::Helpers::FormTagHelper and… #26398 and Add datalist option to text_field helpers #30808. It was also requested for simple_form.

In my opinion, these are the main considerations to add it.

[bdewater]

+1 for making this a proper helper. The tag.datalist example works but isn't as nice as it could be.

I'd like to add that browser support for datalist in combination with text fields is practically universal across browsers, the only major browser (> 1% market share) with limited support is Firefox: it has no support for datalists on date and time fields.

[Sprachprofi]

I've also been looking for this... It's not exactly new or unusual to need a combobox input, i.e. a select box that also allows a write-in option (easier to implement as the opposite: a text box that allows selection). This idea has been part of surveys and ballots for centuries already, in terms of programming languages Visual Basic had it in 2003 already, and I'm amazed that it has taken the HTML standard so long to catch up.

Now it's supported by all browsers (including Firefox) though and W3Schools is educating developers about it. It would be great for Rails to have a native way to do it with a familiar syntax resembling select_tag. I just had to code my own Formtastic input for it...

[MatheusRich]

While a datalist helps with a basic autocomplete, I just want to point out that it does not limit the values to what's on the list. Users still can submit whatever they want.

Not for or against this PR, just a reminder.

[Sprachprofi]

While a datalist helps with a basic autocomplete, I just want to point out that it does not limit the values to what's on the list. Users still can submit whatever they want.

Yes, that's the point of it. Using this for autocomplete is a secondary case I guess, but the main use of a combobox has always been the "select or write-in", e.g. when users can add tags to their blog posts and they can choose either an existing tag or write in a new one. Right now, a common workaround is to offer an "Other" or "New" option in the select and that causes a text field to appear, but that's worse UX than what Visual Basic offered in the early 2000s.