Changing border color on error?

[jpalma-savvy]

I must be overlooking a very simple solution, but I can't seem to find it. I want to change the border color to red when the field has an error inside an activerecord form, and back to its normal state once the validation passes.

I've tried applying it in tailwind inside .field_with_errors, but this doesn't work:

.field_with_errors .combobox_container .hw-combobox__input {
    @apply rounded-md border border-red-500 p-3.5 !important;
}

And I've tried to change it dynamically:

<% if @has_errors %>
  <style>
      .combobox_container .hw-combobox__main__wrapper {
          border: 1px solid #f4aaaa !important;
      }
  </style>
<% end %>

But everything I try I can't get it to change the border color to red when there is an error, then back to gray when there is not.

I'm able to style it just fine, but for example in the second example, it will change the border to red when the error happens, but won't change back once the validation passes, and I've removed that style block - it remains red.

I think there is an easier way to do this, but I couldn't find how.

Thanks!

[josefarias]

Hey @jpalma-savvy thanks for the question

in the second example, it will change the border to red when the error happens, but won't change back once the validation passes, and I've removed that style block - it remains red.

Yeah that seems strange indeed. But I'm not sure it's related to the library. We're not caching any styles or anything like that. So I think the fact that you're able to change the styles one way but not the other points to a problem in your app. Maybe the styles are sticking around somehow?

If you could provide a link to a working reproduction (like a repo with a basic rails app) I'd be happy to take a look. Closing for now, but will reopen if it turns out to be library-related. I'd need to look at a reproduction to say for sure.

For what it's worth, here are the native styles used by the combobox to show a red border on validation errors:

:root {
  --hw-invalid-color: #EF4444;
  --hw-border-width--thick: 2px;
}

.hw-combobox__main__wrapper {
  &:has(.hw-combobox__input--invalid) {
    box-shadow: 0 0 0 var(--hw-border-width--thick) var(--hw-invalid-color);
  }
}

[jpalma-savvy]

Thanks so much, @josefarias! I'll take a look and supply a basic repo if I'm still stuck. Appreciate you!