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.

form915×684 30.4 KB

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.

Questions

I am using here plain HTML for the most part. I know Phoenix has some helpers, but I am not sure on how I would even use them here, so I am staying away from it for now.

How can I fix this?