I have an email input form that uses CoreComponent’s input and error components. When the page is first opened or refreshed (at which time, the email input box is naturally blank), the ‘is required’ error message is displayed for a second and then disappears. In the browser console, the phx-xxxxxx mount: is printed when the said error message disappears, which leads me to suspect that that’s when phx-no-feedback:hidden kicks in.

To solve this problem, I’ve been told that the initial changeset should not include validation, and it should be added in the event handlers. Since, in Ash, however, allow_nil? false is defined at the resource level, how is this supposed to be handled?

def error(assigns) do
    ~H"""
    <p class="mt-1 flex gap-3 text-sm leading-6 text-rose-600 phx-no-feedback:hidden">
      <Heroicons.exclamation_circle mini class="mt-0.5 h-5 w-5 flex-none fill-rose-500" /> <%= render_slot(
        @inner_block
      ) %>
    </p>
 """
end

  def input(assigns) do
    ~H"""
    <div phx-feedback-for={@name}>
      <.label for={@id}><%= @label %></.label>

      <input
        type={@type}
        name={@name}
        id={@id || @name}
        value={Phoenix.HTML.Form.normalize_value(@type, @value)}
        class={[
          "block w-full rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6",
          @border && "phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400",
          @border && "border-zinc-300 focus:border-zinc-400",
          if(!@border, do: "border-0"),
          if(@strike_through, do: "line-through"),
          @errors != [] && "border-rose-400 focus:border-rose-400",
          @class
        ]}
        {@rest}
      />
      <.error :for={msg <- @errors}><%= msg %></.error>
    </div>
    """
  end