Form inputs inside a slot

[mbajur]

Hello! I'm trying to create a component that would let me extract all the common logic i use in all my index views. For this specific examle, it's about having a table with results at the bottom and "quick filters" area above it. Every single index screen has such quick filters section but they differ by filters available in there and a design of the fields in general.

That's how this component looks so far:

# base_index_component.rb
class BaseIndexComponent < ViewComponent::Base
  renders_one :quick_filters
  renders_one :results
end

# base_index_component.html.haml
.base-index
  .quick-filters
    = form_for :xxx do |f|
      = quick_filters

  .results
    = results

And what i aim for is to be able to use a following code in order to "inject" quick filter inputs into my component:

= render(BaseIndexComponent.new) do |bi|
  - bi.quick_filters do |form|
    = form.text_field :query
    = form.text_field :record_type

The above example will obviously raise an exception as quick_filters will not give access to form object defined in component view file. On the other hand, i don't think i can pass that form object back to parent component from the component view (= quick_filters(f) ?) so I'm looking for any alternative approach/ideas on how this could be potentially implemented.

Any tips highly welcome!

[boardfish]

There's probably a cleaner way to do this, but what I've got so far is:

1. Define a component with a lambda slot as follows: renders_one :form, ->(&block) { form_with(**form_opts, &block) }. form_opts can be a method on the component that returns the hash of options you'd otherwise pass to form_with, fields, or fields_for. You can also change the lambda to accept params if you wish.
2. Render it like this:

<%= render FormComponent.new do |c| %>
  <% c.form do |f| %>
    <%= f.text_field :query %>
  <% end %>
<% end %>

If you're using fields or fields_for rather than form_with, you could probably delegate_missing_to those because they don't need to render a surrounding form tag, but I haven't tried that yet. But those helpers might help you, so I'd definitely check out the docs for those.

[boardfish]

In the context of your component, that'd look like:

= render(BaseIndexComponent.new) do |bi|
  - bi.quick_filters do |c|
    - c.form do |form|
      = form.text_field :query
      = form.text_field :record_type

Assuming you were to make quick_filters a delegate slot (i.e. a slot that renders a component) rather than a passthrough slot as you have now.

However, you could also cut out the broker and go renders_one :quick_filters, ->(&block) { form_with(**form_opts, &block) } to get what you were originally intending:

= render(BaseIndexComponent.new) do |bi|
  - bi.quick_filters do |form|
    = form.text_field :query
    = form.text_field :record_type

[mbajur]

Thank your for your extended explanation @boardfish !! Unfortunately, example you provided throws wrong number of arguments (given 1, expected 0) in renders_one line, not sure why.

Also, I'm not sure how is that gonna be rendered inside the component template but ideally i need to render a form tag in complete separation from the search inputs. Form tag will wrap entire component while search inputs (quick filters) will be rendered somewhere deep in the DOM tree

[boardfish]

I'll put together an example repo for the original example soon.

As for what you're asking here, I think you'd either use fields for the slot if you want the quick filters to be rendered in isolation from the form:

renders_one :quick_filters, ->(&block) { fields(???, &block) }

...or use the slot method above with fields_for if you want the component to use form_with:

# In your component...
renders_one :quick_filters, ->(&block) { fields_for(form_opts, &block) }

<%# Component template %>
<%= form_with(form_opts) do |f| %>
  <%= quick_filters %>
<% end %>

Ideally, the params passed to each should be similar so that the form builder names fields similarly for each one, so that they're compatible.

[mbajur]

@boardfish i never considered using fields_for which cuts it for me!! Thank you so much!! There is just onw weird thing i don't really understand - using renders_one as a lambda slot with &block argument requires me to define ANY arguments. Otherwise, it's gonna raise an wrong number of arguments (given 1, expected 0) exception. So i can't just do renders_one :quick_filters, ->(&block) { fields_for(@q, nil, &block) } - instead, i did:

renders_one :quick_filters, ->(dummy: nil, &block) { fields_for(@q, nil, &block) }

Thanks again !!!

[boardfish]

That's interesting - I'll raise an issue to investigate this. And no problem, glad we could find you a solution!

[kg-currenxie]

Very helpful!

Here's what mine ended up as if anyone comes across it

<%= render Form::Component.new({ model: organization }) do |c| %>
  <% c.with_form do |f| %>
    <% c.with_fields do %>
      <%= render TextField::Component.new(f, :name) %>
      <%= render CheckboxField::Component.new(f, :make_default, label: 'Make it my default', description: 'If you have multiple ones, this will be the selected organization every time you log in.') %>
    <% end %>
    <% c.with_buttons do %>
      <%= render Submit::Component.new %>
      <%= render Button::Component.new(path: organizations_path, variant: :secondary).with_content('Back to organizations') %>
    <% end %>
  <% end %>
<% end %>

Component:

# frozen_string_literal: true

module Form
  class Component < ViewComponent::Base
    renders_one :buttons
    renders_one :form, ->(&block) { form_with(**form_options.merge({ class: 'contents' }), &block) }
    renders_one :fields

    attr_reader :form_options, :model

    def initialize(form_options)
      @form_options = form_options
      @model = form_options[:model]
    end
  end
end

and the component template

<div class="overflow-hidden bg-white shadow sm:rounded-md">
  <%= render FormErrors::Component.new(object: model) %>
  <%= form do %>
    <div class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6 p-6">
      <%= fields %>
    </div>
    <div class="flex gap-x-4 p-6 border-t border-t-gray-200">
      <%= buttons %>
    </div>
  <% end %>
</div>

The only added thing is the c.with_form wrapper :) otherwise I couldn't get the buttons to render inside the form-tag. Maybe there's a way to avoid it 🤷

[vokshirg]

Hey @kg-currenxie ! I'm following your solution

but instead of

    <div class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6 p-6">
      <%= fields %>
    </div>

I get only <%= fields %> rendered inside form

can you give please any hints what can be wrong? 🙏