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

Merged in fix/SW-1970-focusable-input-ios-safari (pull request #1796)

Browse Source 
fix(SW-1970): focusable inputs on safari ios

Approved-by: Michael Zetterberg
This commit is contained in:
Christian Andolf
2025-04-16 07:39:37 +00:00
parent 12cebd9c1c 563567716b
commit 6028080e5b
3 changed files with 23 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/scandic-web/components/HotelReservation/FindMyBooking/AdditionalInfoForm.tsx
View File

@@ -40,7 +40,7 @@ export default function AdditionalInfoForm({
confirmationNumber,
lastName,
}).toString()
document.cookie = `bv=${value}; Path=/; Max-Age=600; Secure; SameSite=Strict`
document.cookie = `bv=${encodeURIComponent(value)}; Path=/; Max-Age=600; Secure; SameSite=Strict`
router.refresh()
}

28
apps/scandic-web/components/TempDesignSystem/Form/Input/AriaInputWithLabel/index.tsx
View File

@@ -1,5 +1,10 @@
import { cx } from "class-variance-authority"
import { type ForwardedRef, forwardRef, useId } from "react"
import {
type ForwardedRef,
forwardRef,
useImperativeHandle,
useRef,
} from "react"
import { Input as AriaInput, Label as AriaLabel } from "react-aria-components"
import Label from "@/components/TempDesignSystem/Form/Label"
@@ -11,22 +16,31 @@ import type { AriaInputWithLabelProps } from "./input"
const AriaInputWithLabel = forwardRef(function AriaInputWithLabelComponent(
{ label, ...props }: AriaInputWithLabelProps,
ref: ForwardedRef<HTMLInputElement>
forwardedRef: ForwardedRef<HTMLInputElement>
) {
const uniqueId = useId()
const inputId = `${uniqueId}-${props.name}`
const ref = useRef<HTMLInputElement>(null)
useImperativeHandle(forwardedRef, () => ref.current as HTMLInputElement)
return (
<AriaLabel className={styles.container} htmlFor={inputId}>
<AriaLabel
className={styles.container}
// fixes an issue with mobile devices being unable to
// focus because the input height is 0
onTouchStart={() => {
if (ref.current) {
ref.current.focus()
}
}}
>
<Body asChild fontOnly>
<AriaInput
{...props}
className={cx(styles.input, props.className)}
ref={ref}
id={inputId}
/>
</Body>
<Label required={!!props.required}>{label}</Label>
<Label required={props.required}>{label}</Label>
</AriaLabel>
)
})

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

@@ -6,6 +6,7 @@
line-height: 120%;
text-align: left;
transition: font-size 100ms ease;
user-select: none;
}
span.small {