search

adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
12.73k stars 1.09k forks source link

`createLeafComponent` Outputs Incorrect RefAttributes Type #6997

Closed ArrayKnight closed 3 weeks ago

ArrayKnight commented 3 weeks ago

Provide a general summary of the issue here

The type for ListBoxItem (and possibly others) changed from having props intersectioned with RefAttributes<HTMLDivElement> (technically this is wrong too since the component could be an HTMLAnchorElement) to RefAttributes<T>

https://github.com/adobe/react-spectrum/blob/98e21e19d50b4bf5c9114e17a75cca4c11254db0/packages/%40react-aria/collections/src/CollectionBuilder.tsx#L161

https://github.com/adobe/react-spectrum/blob/98e21e19d50b4bf5c9114e17a75cca4c11254db0/packages/react-aria-components/src/ListBox.tsx#L318

This means that if a ref prop is added it now requires type casting to satisfy TS, but is incorrect according to what the ref actually gets bound: <ListBoxItem ref={ref as ForwardedRef<T>} />, when ref is really attached to the DOM element a | div

This change seems to have occurred around the time of the switch over to @react-aria/collections, types are more correct in "react-aria-components": "1.2.1"

🤔 Expected Behavior?

Exported type for const ListBoxItem should be same type as the inner function ListBoxItem

Need to check the types for other components wrapped with createLeafComponent

😯 Current Behavior

RefAttributes receives generic type T instead of the expected DOM element type

💁 Possible Solution

Correct return type of createLeafComponent to maintain ref type

Potentially also update ListBoxItem type to have union of HTMLAnchorElement | HTMLDivElement

🔦 Context

No response

🖥️ Steps to Reproduce

The code sandbox environment isn't in TS, so not possible to show there

Version

"@react-aria/collections": "3.0.0-alpha.3", "react-aria-components": "1.3.1"

What browsers are you seeing the problem on?

Other

If other, please specify.

Typescript

What operating system are you using?

Mac & Windows

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

snowystinger commented 3 weeks ago

Closing as a dupe https://github.com/adobe/react-spectrum/issues/6799 Can reopen if it's different

ArrayKnight commented 3 weeks ago

Yup, definitely a dupe. Apologies for not finding that previous to posting