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.
This commit is contained in:
Christian Andolf
2025-04-16 17:31:14 +02:00
parent 8c0597727b
commit b52e1b0629

View File

@@ -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>