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, confirmationNumber,
lastName, lastName,
}).toString() }).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() 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 { 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 { Input as AriaInput, Label as AriaLabel } from "react-aria-components"
import Label from "@/components/TempDesignSystem/Form/Label" import Label from "@/components/TempDesignSystem/Form/Label"
@@ -11,22 +16,31 @@ import type { AriaInputWithLabelProps } from "./input"
const AriaInputWithLabel = forwardRef(function AriaInputWithLabelComponent( const AriaInputWithLabel = forwardRef(function AriaInputWithLabelComponent(
{ label, ...props }: AriaInputWithLabelProps, { label, ...props }: AriaInputWithLabelProps,
ref: ForwardedRef<HTMLInputElement> forwardedRef: ForwardedRef<HTMLInputElement>
) { ) {
const uniqueId = useId() const ref = useRef<HTMLInputElement>(null)
const inputId = `${uniqueId}-${props.name}`
useImperativeHandle(forwardedRef, () => ref.current as HTMLInputElement)
return ( 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> <Body asChild fontOnly>
<AriaInput <AriaInput
{...props} {...props}
className={cx(styles.input, props.className)} className={cx(styles.input, props.className)}
ref={ref} ref={ref}
id={inputId}
/> />
</Body> </Body>
<Label required={!!props.required}>{label}</Label> <Label required={props.required}>{label}</Label>
</AriaLabel> </AriaLabel>
) )
}) })

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

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