Cannot input text in text field from LiveComponent

Solution 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.