Cannot input text in text field from LiveComponent

Fl4m3Ph03n1x

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.

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?

7 comments

/phoenix #liveview #liveview-form #live-component

0 1702 7

2022-01-22 17:38:39 UTC

First 7 of 7 Posts

LostKobrakai

Can you be a bit more detailed? Do you see a cursor, does it flicker but reset, does it do nothing?

Post #1

Fl4m3Ph03n1x

When I click it, nothing happens.
I would expect to see a | inside of the text box when I click it, but this does not happen. Its like it is preventing the input.

Post #2

benwilson512

Author of Craft GraphQL APIs in Elixir with Absinthe

Do you see any errors in your browser console or phoenix console?

Post #3

Fl4m3Ph03n1x

ezgif.com-gif-maker

This is what happens. You can see I am fanatically clicking the text input boxes, but nothing happens.

Is this because I am not using Phoenix Helpers? Do I need to remake the whole thing?
Am I missing some phx-something in the form?

No errors appear in the console either.

Post #4

Fl4m3Ph03n1x

After some investigation I found the cause for the issue in my assets\css\app.css:

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

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

This piece of code (that shows and hides the forms) makes it so I can not type into them.
Why is this happening?

I also realize the native Phoenix css code has something similar in the same file:

  .fade-in-scale {
    animation: 0.2s ease-in 0s normal forwards 1 fade-in-scale-keys;
  }
  
  .fade-out-scale {
    animation: 0.2s ease-out 0s normal forwards 1 fade-out-scale-keys;
  }
  
  .fade-in {
    animation: 0.2s ease-out 0s normal forwards 1 fade-in-keys;
  }
  .fade-out {
    animation: 0.2s ease-out 0s normal forwards 1 fade-out-keys;
  }
  
  @keyframes fade-in-scale-keys{
    0% { scale: 0.95; opacity: 0; }
    100% { scale: 1.0; opacity: 1; }
  }
  
  @keyframes fade-out-scale-keys{
    0% { scale: 1.0; opacity: 1; }
    100% { scale: 0.95; opacity: 0; }
  }
  
  @keyframes fade-in-keys{
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  @keyframes fade-out-keys{
    0% { opacity: 1; }
    100% { opacity: 0; }
  }

Could there be a conflict?

Post #5

Fl4m3Ph03n1x

After more experimentation, I found that if I stop using my css classes hidden and show and instead use fade-out and fade-in (from Phoenix), the text inputs work.

However, Because I am not removing the elements from the page, I am just left with huge blank spaces.

What so special about my classes that they mess Phoenix text inputs?

Post #6

benwilson512

Author of Craft GraphQL APIs in Elixir with Absinthe

The browser has no idea these are from phoenix, these are regular text inputs not “phoenix” text inputs. I’m not sure about the interaction going on between the CSS and the DOM but this isn’t really specific to phoenix. I would make sure live view isn’t doing some sort of crazy rendering loop where it’s re-rendering rapidly or something and overloading the browser but as long as that isn’t happening this seems mostly just a core CSS / HTML question.

Post #7

— All posts loaded —