b52e1b0629
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.
57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
import { cx } from "class-variance-authority"
|
|
import {
|
|
type ForwardedRef,
|
|
forwardRef,
|
|
useId,
|
|
useImperativeHandle,
|
|
useRef,
|
|
} from "react"
|
|
import { Input as AriaInput, Label as AriaLabel } from "react-aria-components"
|
|
|
|
import Label from "@/components/TempDesignSystem/Form/Label"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
|
|
import styles from "./input.module.css"
|
|
|
|
import type { AriaInputWithLabelProps } from "./input"
|
|
|
|
const AriaInputWithLabel = forwardRef(function AriaInputWithLabelComponent(
|
|
{ label, ...props }: AriaInputWithLabelProps,
|
|
forwardedRef: ForwardedRef<HTMLInputElement>
|
|
) {
|
|
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 (
|
|
<AriaLabel
|
|
className={styles.container}
|
|
// fixes an issue with mobile devices being unable to
|
|
// focus because the input height is 0
|
|
onTouchStart={() => {
|
|
if (ref.current) {
|
|
ref.current.focus()
|
|
}
|
|
}}
|
|
>
|
|
<Body asChild fontOnly>
|
|
<AriaInput
|
|
{...props}
|
|
className={cx(styles.input, props.className)}
|
|
ref={ref}
|
|
id={inputId}
|
|
/>
|
|
</Body>
|
|
<Label required={props.required}>{label}</Label>
|
|
</AriaLabel>
|
|
)
|
|
})
|
|
|
|
export default AriaInputWithLabel
|