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

Merged in fix/restore-generated-id-inputs (pull request #1829)

Browse Source 
fix: restore generated id for inputs

Approved-by: Arvid Norlin
This commit is contained in:
Christian Andolf
2025-04-17 07:03:43 +00:00
parent 007b20bfb6 b52e1b0629
commit 3ce3063973
1 changed files with 8 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,6 +2,7 @@ import { cx } from "class-variance-authority"
import { import {
type ForwardedRef, type ForwardedRef,
forwardRef, forwardRef,
useId,
useImperativeHandle, useImperativeHandle,
useRef, useRef,
} from "react" } from "react"
@@ -20,6 +21,12 @@ const AriaInputWithLabel = forwardRef(function AriaInputWithLabelComponent(
) { ) {
const ref = useRef<HTMLInputElement>(null) 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) useImperativeHandle(forwardedRef, () => ref.current as HTMLInputElement)
return ( return (
@@ -38,6 +45,7 @@ const AriaInputWithLabel = forwardRef(function AriaInputWithLabelComponent(
{...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>