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?
Can you be a bit more detailed? Do you see a cursor, does it flicker but reset, does it do nothing?
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.
Do you see any errors in your browser console or phoenix console?
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.
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?
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?
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.
1 Like
