0

Firstly I am quite new to the react and CSS-IN_JS so this may be a noob question. But I was unable to find a good answer for this.

I am trying to implement floating labels for my react-project in the forms I am using. Project repo: https://github.com/DawidGaleziewski/alpha-tank-full-stack/tree/master/client

I have created a separate component that combines the label and input field: https://github.com/DawidGaleziewski/alpha-tank-full-stack/blob/master/client/src/components/atoms/Inputs/InputSlider.js

In order to decide if the label should be moved up I use the state of the input and if its length > 0 I apply the style to move the label up.

The state of the input is linked to the forms state: https://github.com/DawidGaleziewski/alpha-tank-full-stack/blob/master/client/src/components/Forms/LoginForm.js

That works fine, however, the problem is with the login form and autocomplete (saved credentials/password in the browser) when those are applied to the browser, the component remembers the initial state I set for the form/inputs and the labels are covering the text in the input: picture of the issue

I can think of 2 solutions but I do not really sure about those:

  1. Instead of using state in emotion to decide if the label should be up, use standard css trick with targeting input:valid + label. However, the problem is I should use the required on the input tags then. And there are a lot of fields in my app that I need to be optional.

  2. useEffect to get the initial state of the inputs from the form on component mount (i.e document.querySelector(input).value). I am not sure about that however as I think I should not get the values to the state from the DOM.

Feels like I am missing something obvious here. Thank you for any sugestions

Dawid Gałęziewski
  • 11
  • 1
  • 1. Consider `input:placeholder-shown` [source](https://stackoverflow.com/a/35593489/863110). 2. You can use `useEffect` to watch the props so you wouldn't have to deal with the DOM [source](https://stackoverflow.com/a/55299508/863110) – Mosh Feu Jun 30 '20 at 10:34

1 Answers1

0

Ok it turns out it was not the issue with state. The problem was with css. In order to add the styles to floating label I needed to target input::not(-webkit-autofill) label

Answer found in: Bad behavior of floating-labels when autocomplete

Dawid Gałęziewski
  • 11
  • 1