Cannot input text in text field from LiveComponent

Question

Background

I havea live component that is basically a form with a couple of text inputs and a submit button. I have the interface kinda looking the way I want, but there is a problem: I cannot input anything into the text input fields.

And I have no idea why.

Code

As you can see I have 2 text input fields.

My code is the following:

defmodule WebInterface.Live.Window.Main.Authenticate do
  @moduledoc """
  LiveView subcomponent for the Authenticate page as part of the Main subcomponent.
  This subcomponent has the forms for the user's authentication.
  """

  use WebInterface, :live_component

  alias Elixir.Phoenix.LiveView.Rendered

  @spec render(map) :: Rendered.t
  def render(assigns) do
    ~H"""
      <div class="header">
        <h2>Description</h2>
        <p><%= @selected_command.description %></p>
      </div>
      <div class="body">
        <form>
          <div class="intro">
            <h3>Authentication</h3>
            <p>Fill the Cookie and token. Lorem Ipsum.</p>
          </div>
          <label for="cookie">Cookie: </label>
          <input type="text" id="cookie" name="cookie"/>

          <label for="token">Token: </label>
          <input type="text" id="token" name="token"/>
        </form>
        <button
          phx-click="execute_command"
          phx-value-command={@selected_command.id}
          >
            Save
        </button>
      </div>
    """
  end

end

At first I thought this was happening because I was not using text_input, however, after replacing the <input type="text" id="cookie" name="cookie"/> with it, the same happens.

CSS

After more investigation I found out that the text inputs are not working because of the CSS code:

.hidden {
    opacity: 0;
    height: 0px;
}

.show {
  opacity: 1;
  transition: opacity 0.6s linear;
}

Instead, if I use Phoenix's built in CSS classes fade-in and fade-out the issue does not happen.

I do get huge blank spaces in my app though (because the divs are just faded out, they were not removed), which is another issue.

Questions

• Why is my CSS messing the text-input field?
• How can I fix this?

Answer 1

As explained in the documentation about the form binding: "to handle real-time form validation and saving, your template would use both phx_change and phx_submit bindings"

https://hexdocs.pm/phoenix_live_view/form-bindings.html

However, if you only need to "save", you can just use phx-submit.

To use plain HTML, it has to use the proper id and name as follows.

<form id="auth-form" method="post" phx-submit="save">
  <div class="intro">
    <h3>Authentication</h3>
    <p>Fill the Cookie and token. Lorem Ipsum.</p>
  </div>
  <label for="auth-form_cookie">Cookie: </label>
  <input type="text" id="auth-form_cookie" name="auth[cookie]"/>

  <label for="auth-form_token">Token: </label>
  <input type="text" id="auth-form_token" name="auth-form[token]"/>
  <button phx-disable-with="Saving..." type="submit">Save</button>
</form>

The button must be inside the form tags.

If you need a hidden input, put it inside the form tags also:

<input id="auth-form_command_id" name="auth-form[command_id]" type="hidden" value={@selected_command.id}>

If the input form is cannot be clicked in any case, probably it is behind other elements. Please try to add the z-index style style="z-index: 1000 !important;" in the form or input tags.