scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Christian Andolf
2025-06-03 10:23:25 +02:00
parent 8dbd36bdbd
commit 45d1155054
5 changed files with 26 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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