Merged in fix/LOY-252-scroll-to-input-focus (pull request #2272)

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

Approved-by: Michael Zetterberg
Approved-by: Chuma Mcphoy (We Ahead)

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 {
+.input:not(:focus):not(:placeholder-shown) {
-  height: 0px;
+  height: 1px;
   transition: height 150ms ease;
 }
 
 .input:focus,
-.input:focus:placeholder-shown,
+.input:focus:placeholder-shown {
-.input:active,
-.input:active: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:placeholder-shown ~ .label,
-input:not(:placeholder-shown) ~ .label,
+textarea:placeholder-shown ~ .label {
-textarea:active ~ .label,
-textarea:not(: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.label,
-textarea:placeholder-shown:active ~ .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(.react-aria-SelectValue):has(:nth-child(2)) .label:not(.discreet) {
-:global(.select-button):active .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,6 +149,7 @@ export function SelectFilter({
               />
             </Typography>
           </span>
+        </Label>
         <Button className={styles.button}>
           <MaterialIcon
             icon="chevron_right"
@@ -158,7 +159,6 @@ export function SelectFilter({
             className={styles.chevron}
           />
         </Button>
-        </Label>
 
         <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%;