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);
 }

packages/design-system/lib/components/Select/SelectFilter.tsx

@@ -78,7 +78,7 @@ function ComboBoxInner({
     }
   }, [inputRef, inputValue, isFocused, selectedItem?.textValue])
 
-  return children
+  return <div className={styles.inner}>{children}</div>
 }
 
 export function SelectFilter({
@@ -123,7 +123,7 @@ export function SelectFilter({
       {...props}
     >
       <ComboBoxInner inputRef={inputRef}>
-        <Label className={styles.inner}>
+        <Label>
           {icon ? (
             <MaterialIcon
               icon={icon}
@@ -149,16 +149,16 @@ export function SelectFilter({
               />
             </Typography>
           </span>
-          <Button className={styles.button}>
-            <MaterialIcon
-              icon="chevron_right"
-              size={24}
-              color={iconColor}
-              aria-hidden="true"
-              className={styles.chevron}
-            />
-          </Button>
         </Label>
+        <Button className={styles.button}>
+          <MaterialIcon
+            icon="chevron_right"
+            size={24}
+            color={iconColor}
+            aria-hidden="true"
+            className={styles.chevron}
+          />
+        </Button>
 
         <Popover
           className={styles.popover}

packages/design-system/lib/components/Select/select.module.css

@@ -63,6 +63,10 @@
   .button {
     padding: 0;
   }
+
+  > label {
+    flex: 1;
+  }
 }
 
 .button,
@@ -72,7 +76,7 @@
 }
 
 .input {
-  height: 0;
+  height: 1px;
   padding: 0;
   width: 100%;