fix(LOY-252): add height to input elements to make iOS scroll to focused inputs

fixed incorrect html with multiple interactive elements inside label

fixed inconsistent placeholder attribute handling between browsers

removed active state so not to prevent iOS from focusing inputs

apps/scandic-web/components/TempDesignSystem/Form/Input/AriaInputWithLabel/input.module.css

@@ -12,7 +12,7 @@
   transition: border-color 200ms ease;
 }
 
-.container:has(.input:active, .input:focus) {
+.container:has(.input:focus) {
   border-color: var(--Scandic-Blue-90);
 }
 
@@ -37,20 +37,18 @@
   padding: 0;
 }
 
-.container:has(.input:not(:placeholder-shown)) {
+.container:has(.input:placeholder-shown) {
   align-content: space-around;
   gap: var(--Spacing-x-half);
 }
 
-.input:not(:active, :focus):placeholder-shown {
-  height: 0px;
+.input:not(:focus):not(:placeholder-shown) {
+  height: 1px;
   transition: height 150ms ease;
 }
 
 .input:focus,
-.input:focus:placeholder-shown,
-.input:active,
-.input:active:placeholder-shown {
+.input:focus:placeholder-shown {
   height: 18px;
   transition: height 150ms ease;
   outline: none;

apps/scandic-web/components/TempDesignSystem/Form/Input/index.tsx

@@ -26,7 +26,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
     label,
     maxLength,
     name,
-    placeholder = "",
+    placeholder,
     readOnly = false,
     registerOptions = {},
     type = "text",

apps/scandic-web/components/TempDesignSystem/Form/Label/label.module.css

@@ -30,10 +30,8 @@ span.required:after {
 }
 
 /* Handle input and textarea fields */
-input:active ~ .label,
-input:not(:placeholder-shown) ~ .label,
-textarea:active ~ .label,
-textarea:not(:placeholder-shown) ~ .label {
+input:placeholder-shown ~ .label,
+textarea:placeholder-shown ~ .label {
   display: block;
   font-size: 12px;
 }
@@ -49,9 +47,7 @@ textarea:placeholder-shown ~ .label {
 }
 
 input:placeholder-shown:focus ~ .label,
-input:placeholder-shown:active ~ .label,
-textarea:placeholder-shown.label,
-textarea:placeholder-shown:active ~ .label {
+textarea:placeholder-shown.label {
   margin-bottom: var(--Spacing-x-half);
 }
 
@@ -67,8 +63,7 @@ textarea:disabled ~ .label,
 }
 
 :global(.select-container)[data-open="true"] .label:not(.discreet),
-:global(.react-aria-SelectValue):has(:nth-child(2)) .label:not(.discreet),
-:global(.select-button):active .label:not(.discreet) {
+:global(.react-aria-SelectValue):has(:nth-child(2)) .label:not(.discreet) {
   font-size: 12px;
   margin-bottom: var(--Spacing-x-half);
 }