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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user