search

abevoelker / simple_form_tailwind_css

Tailwind components for Simple Form
MIT License
30 stars 3 forks source link

Error icon not shown for number fields #1

Open nileshtrivedi opened 3 years ago

nileshtrivedi commented 3 years ago

My form is this:

<div class="max-w-md p-6 mx-auto bg-white rounded-md shadow-md">
<%= simple_form_for @form, builder: SimpleForm::Tailwind::FormBuilder, html: { class: "space-y-6" }, url: custom_topic_path(@topic), method: :post do |f| %>
    <%= f.error_notification %>
    <%= f.input :age, as: :integer, wrapper: :tailwind_string_input %>
    <%= f.input :email, wrapper: :tailwind_string_input %>
    <%= f.submit 'Save', class: "py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
<% end %>
</div>

As you can see, I am using tailwind_string_input for an integer field. In case of errors, the pr-10 class does get applied, but no exclamation-icon is shown on the right:

image

I'm not sure what's the best way to configure this. Perhaps all that is needed is an example in the README.

abevoelker commented 3 years ago

Interesting, I haven't tested that input with numeric fields yet. What happens if you disable the native browser spinners?

https://css-tricks.com/snippets/css/turn-off-number-input-spinners/ https://github.com/tailwindlabs/tailwindcss/issues/1101