Open
Description
Provide a general summary of the issue here
I noticed this with GridListItem
:
const GridListItem: <T extends object>(props: GridListItemProps<T> & React.RefAttributes<T>) => React.ReactElement | null
It comes from the definition of createLeafComponent
(link):
export function createLeafComponent<T extends object, P extends object, E extends Element>(type: string, render: (props: P, ref: ForwardedRef<E>) => ReactElement | null): (props: P & React.RefAttributes<T>) => ReactElement | null;
export function createLeafComponent<T extends object, P extends object, E extends Element>(type: string, render: (props: P, ref: ForwardedRef<E>, node: Node<T>) => ReactElement | null): (props: P & React.RefAttributes<T>) => ReactElement | null;
I believe the return type just needs to be updated to (props: P & React.RefAttributes<E>) => ReactElement | null
.
🤔 Expected Behavior?
Components returned by createLeafComponent
should have RefAttributes
of their DOM element, not their item type.
😯 Current Behavior
Components returned by createLeafComponent
have RefAttributes
of their item type.
💁 Possible Solution
Fix the return type of createLeafComponent
.
🔦 Context
Unable to pass a correctly-typed ref to GridListItem
and others produced by createLeafNode
.
🖥️ Steps to Reproduce
interface MyType {
foo: 'bar'
}
const MyComponent = () => {
const ref = useRef<HTMLDivElement>(null)
return (
<GridListItem<MyType>
ref={ref} // type error! It wants MyType
>
// children...
</GridListItem>
)
}
Version
react-aria-components 1.10.1
What browsers are you seeing the problem on?
Other
If other, please specify.
No response
What operating system are you using?
macOS Sequoia 15.5
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response
Metadata
Metadata
Assignees
Labels
No labels