Checkbox unresponsive after errors

[cimm]

Rails adds a field_with_errors wrapper element around the invalid form element after submitting the form. This is used to style the form element with CSS (red border around an input field with invalid data for example).

The custom Fomantic UI checkbox (the iOS like toggle element) does not correctly handle this extra wrapper element making the field unresponsive: you can no longer check or uncheck the custom Fomantic UI checkbox.

As a workaround we can tell Rails not to add the wrapper element by adding config.action_view.field_error_proc = Proc.new { |html_tag, instance| html_tag.html_safe } to the config/application.rb file but this means we can no longer style form fields with errors.

Tested with fomantic-ui-sass 2.8.3 in a Rails 6.0.2 application.

[cimm]

I also reported this upstream: https://github.com/fomantic/Fomantic-UI/issues/1529

[shanecav84]

I've used this which is janky but might work for you:

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
  html = nil
  if html_tag.match?(/checkbox|label/)
    html = html_tag
  else
    html = <<~HTML
      <div class='field error'>
        #{html_tag}
      </div>
    HTML
  end
  html.html_safe
end