From 563567716b1a8188dabac1f9904be976ff990791 Mon Sep 17 00:00:00 2001 From: Christian Andolf Date: Mon, 14 Apr 2025 16:03:35 +0200 Subject: [PATCH] fix(SW-1970): focusable inputs on safari ios some cleanup and non-interactive label texts in inputs --- .../FindMyBooking/AdditionalInfoForm.tsx | 2 +- .../Form/Input/AriaInputWithLabel/index.tsx | 28 ++++++++++++++----- .../Form/Label/label.module.css | 1 + 3 files changed, 23 insertions(+), 8 deletions(-) diff --git a/apps/scandic-web/components/HotelReservation/FindMyBooking/AdditionalInfoForm.tsx b/apps/scandic-web/components/HotelReservation/FindMyBooking/AdditionalInfoForm.tsx index 13190a2de..86a5dec99 100644 --- a/apps/scandic-web/components/HotelReservation/FindMyBooking/AdditionalInfoForm.tsx +++ b/apps/scandic-web/components/HotelReservation/FindMyBooking/AdditionalInfoForm.tsx @@ -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() } diff --git a/apps/scandic-web/components/TempDesignSystem/Form/Input/AriaInputWithLabel/index.tsx b/apps/scandic-web/components/TempDesignSystem/Form/Input/AriaInputWithLabel/index.tsx index 72eaa155d..b944b0bb8 100644 --- a/apps/scandic-web/components/TempDesignSystem/Form/Input/AriaInputWithLabel/index.tsx +++ b/apps/scandic-web/components/TempDesignSystem/Form/Input/AriaInputWithLabel/index.tsx @@ -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 + forwardedRef: ForwardedRef ) { - const uniqueId = useId() - const inputId = `${uniqueId}-${props.name}` + const ref = useRef(null) + + useImperativeHandle(forwardedRef, () => ref.current as HTMLInputElement) return ( - + { + if (ref.current) { + ref.current.focus() + } + }} + > - + ) }) 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 3b124fa3d..c12193b20 100644 --- a/apps/scandic-web/components/TempDesignSystem/Form/Label/label.module.css +++ b/apps/scandic-web/components/TempDesignSystem/Form/Label/label.module.css @@ -6,6 +6,7 @@ line-height: 120%; text-align: left; transition: font-size 100ms ease; + user-select: none; } span.small {