Why is the cursor/caret in my text_input missing when empty?

I have a simple form with one input, which is shown upon change to @add_category

<%= if @add_category do %>
  <div class="flex">
    <%= f = form_for @category_changeset, "#", phx_submit: "save_category" %>
      <%= text_input f, :name, class: "border border-gray-700", phx_hook: "AutoFocus", autocomplete: "off" %>
      <%= error_tag f, :name %>
      <%= submit "Create category" %>
    </form>
  </div>

But when the text_input is focused, the blinking cursor (aka caret) does not appear. After some text is entered, it does appear and blink as usual. But if I remove the text and make the input empty again, the cursor disappears. So far, I’ve tried adding placeholders, default values, turning off autocomplete, adding classes such as appearance-none, using standard <input></input> instead of the helper, but nothing has properly enabled the cursor when the input is empty. I’ve also tried several other web browsers, without any luck.

Does anyone know what the problem is here?

I’m unsure if phoenix could cause anything like that, but I do recall Chrome having such a bug on some configurations. Does it happen on all browsers or just a certain browser? What’s your client configuration?

I use vanilla Brave, mostly.

1 Like

For anyone else experiencing this issue, here is a solution that worked for me:

<%= text_input f, :name, class: "pl-1" %>

which is the tailwind equivalent of padding-left: 0.25rem;

It seems like the cursor/caret was overlapping the left border of the input field, and adding this small amount of padding moves it just far enough to be seen.

Nothing to do with Phoenix. Just basic HTML/CSS troubles :smile:

2 Likes