Search code examples
rubyruby-on-rails-5simple-form

Custom wrapper in simple_form: duplicated input


I'm using the simple_form gem in my Rails 5.2 application. Currently, I'm having a bit of a problem when using custom wrappers around my input.

My wrapper

config.wrappers :mini_input, tag: 'div', class: 'row responsive-label', error_class: 'error' do |b|
  b.use :html5
  b.wrapper tag: 'div', class: 'col-sm-12 col-md-3' do |c|
    c.use :label_input
  end
  b.wrapper tag: 'div', class: 'col-sm-12 col-md-4' do |c|
    c.use :input
  end
end

My form

simple_form_for(@user) do |f|
  ...
  <%= f.input :name, required: true, label: "Name", autofocus: true, wrapper: :mini_input %>
  ...
end

Expected output

<div class="row responsive-label">
  <div class="col-sm-12 col-md-3">
    <label ...>
  </div>
  <div class="col-sm-12 col-md-4">
    <input ...>
  </div>
</div>

...Actual output

<div class="row responsive-label">
  <div class="col-sm-12 col-md-3">
    <label ...>
    <input ...>    <!-- This input should not be here -->
  </div>
  <div class="col-sm-12 col-md-4">
    <input ...>
  </div>
</div>

I'm thinking maybe there is an error in my wrapper config, I just can't locate it right now.


Solution

  • As pointed out by a friend of mine in a tweet, the solution was to use label instead of label_input in the wrapper configuration.

    config.wrappers :mini_input, tag: 'div', class: 'row responsive-label', error_class: 'error' do |b|
      b.use :html5
      b.wrapper tag: 'div', class: 'col-sm-12 col-md-3' do |c|
        # c.use :label_input  Wrong
        c.use :label
      end
      b.wrapper tag: 'div', class: 'col-sm-12 col-md-4' do |c|
        c.use :input
      end
    end