From b52e1b06297f0790c1534e5173afc8fba2135c09 Mon Sep 17 00:00:00 2001
From: Christian Andolf <christian.andolf@scandichotels.com>
Date: Wed, 16 Apr 2025 17:31:14 +0200
Subject: [PATCH] fix: restore generated id for inputs

really this shouldn't be needed but in multiple cases we're passing the field name as id which causes multiple labels to use the same for value. really we should just omit this prop unless necessary so we don't need to generate it like this.
---
 .../Form/Input/AriaInputWithLabel/index.tsx               | 8 ++++++++
 1 file changed, 8 insertions(+)

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 b944b0bb8..2e980044c 100644
--- a/apps/scandic-web/components/TempDesignSystem/Form/Input/AriaInputWithLabel/index.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/Form/Input/AriaInputWithLabel/index.tsx
@@ -2,6 +2,7 @@ import { cx } from "class-variance-authority"
 import {
   type ForwardedRef,
   forwardRef,
+  useId,
   useImperativeHandle,
   useRef,
 } from "react"
@@ -20,6 +21,12 @@ const AriaInputWithLabel = forwardRef(function AriaInputWithLabelComponent(
 ) {
   const ref = useRef<HTMLInputElement>(null)
 
+  // Unique id is required for multiple inputs of same name appearing multiple times
+  // on same page. This will inherited by parent label element.
+  // Shouldn't really be needed if we don't set id though.
+  const uniqueId = useId()
+  const inputId = `${uniqueId}-${props.name}`
+
   useImperativeHandle(forwardedRef, () => ref.current as HTMLInputElement)
 
   return (
@@ -38,6 +45,7 @@ const AriaInputWithLabel = forwardRef(function AriaInputWithLabelComponent(
           {...props}
           className={cx(styles.input, props.className)}
           ref={ref}
+          id={inputId}
         />
       </Body>
       <Label required={props.required}>{label}</Label>