Skip to content

createLeafComponent adds the wrong ref type to the returned component #8476

Open
@jdharrisnz

Description

@jdharrisnz

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

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions