Move placeholder up when input is autofilled (#175)

Author: Joozty

src/elements/forms/text-field.css

@@ -77,14 +77,6 @@ label {
   }
 }
 
-input:invalid,
-input:invalid + label {
-  --form-control-color: var(--danger-dark);
-
-  /* For some reason --form-control-color change is not enough */
-  --form-label-color: var(--form-control-color);
-}
-
 /* Size variations */
 
 .small {
@@ -99,6 +91,7 @@ input:invalid + label {
 
 :matches(input, select, textarea):focus + label,
 :matches(input, select, textarea):not(:placeholder-shown) + label,
+:matches(input, select, textarea):-webkit-autofill + label,
 .focus label {
   font-size: var(--form-label-font-size);
   background: var(--white, #fff);
@@ -109,7 +102,7 @@ input:invalid + label {
   );
 }
 
-.focus ::placeholder,
+.focus::placeholder,
 :focus::placeholder {
   opacity: 1;
   transform: none;
@@ -132,3 +125,9 @@ input:invalid + label {
   /* For some reason --form-control-color change is not enough */
   --form-label-color: var(--form-control-color);
 }
+
+.touched:invalid,
+.touched:invalid + label {
+  --form-control-color: var(--danger-dark);
+  --form-label-color: var(--form-control-color);
+}

src/elements/forms/text-field.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 
 import styles from './text-field.css'
@@ -35,7 +35,7 @@ const TextField = React.forwardRef(
     ref
   ) => {
     const controlId = [id, 'control'].join('-')
-
+    const [isTouched, setIsTouched] = useState(false)
     return (
       <Tag
         id={id}
@@ -44,15 +44,22 @@ const TextField = React.forwardRef(
             [size]: size !== 'default',
             [variant]: variant !== 'normal',
             focus: variant !== 'normal',
+            touched: isTouched,
           })
           .from(styles)
           .join(className)}
       >
         <input
           ref={ref}
           id={controlId}
+          onBlur={() => !isTouched && setIsTouched(true)}
           aria-invalid={variant === 'error' ? 'true' : 'false'}
           aria-describedby={`${id}-helper`}
+          className={classNames
+            .use({
+              touched: isTouched,
+            })
+            .from(styles)}
           {...inputProps}
         />
         <label htmlFor={controlId}>{label}</label>