From 45d1155054ef25aafdc20e834e041efb3059882d Mon Sep 17 00:00:00 2001
From: Christian Andolf <christian.andolf@scandichotels.com>
Date: Tue, 3 Jun 2025 10:23:25 +0200
Subject: [PATCH] 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
---
 .../Input/AriaInputWithLabel/input.module.css | 12 +++++-----
 .../TempDesignSystem/Form/Input/index.tsx     |  2 +-
 .../Form/Label/label.module.css               | 13 ++++-------
 .../lib/components/Select/SelectFilter.tsx    | 22 +++++++++----------
 .../lib/components/Select/select.module.css   |  6 ++++-
 5 files changed, 26 insertions(+), 29 deletions(-)

diff --git a/apps/scandic-web/components/TempDesignSystem/Form/Input/AriaInputWithLabel/input.module.css b/apps/scandic-web/components/TempDesignSystem/Form/Input/AriaInputWithLabel/input.module.css
index 00bfc3754..b68e9cd50 100644
--- a/apps/scandic-web/components/TempDesignSystem/Form/Input/AriaInputWithLabel/input.module.css
+++ b/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;
diff --git a/apps/scandic-web/components/TempDesignSystem/Form/Input/index.tsx b/apps/scandic-web/components/TempDesignSystem/Form/Input/index.tsx
index d2dcb10db..18a737e44 100644
--- a/apps/scandic-web/components/TempDesignSystem/Form/Input/index.tsx
+++ b/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",
diff --git a/apps/scandic-web/components/TempDesignSystem/Form/Label/label.module.css b/apps/scandic-web/components/TempDesignSystem/Form/Label/label.module.css
index c12193b20..b2ebbd918 100644
--- a/apps/scandic-web/components/TempDesignSystem/Form/Label/label.module.css
+++ b/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);
 }
diff --git a/packages/design-system/lib/components/Select/SelectFilter.tsx b/packages/design-system/lib/components/Select/SelectFilter.tsx
index c11e72656..473798b51 100644
--- a/packages/design-system/lib/components/Select/SelectFilter.tsx
+++ b/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}
diff --git a/packages/design-system/lib/components/Select/select.module.css b/packages/design-system/lib/components/Select/select.module.css
index 174fbc608..0bfccab18 100644
--- a/packages/design-system/lib/components/Select/select.module.css
+++ b/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%;