Comments (5)
I think we're aiming to tag a release today — but if not then tomorrow. 👍
In the meantime you can use our insiders build once it's updated (may take a few minutes):
npm install @headlessui/react@insiders
from headlessui.
Hey! So this is a known limitation of TypeScript in how it interprets JSX. Children in JSX/TSX can't be "typesafe" and as a result are not able to infer their types, props, etc… based on the parent component.
Matt Pocock has an article about this topic that details some of the problems. But the gist is that we'd need to find a way to design the types such that the "children" of Combobox are only of a certain type — this would then allow us to infer the props type. Sadly this is just not possible today.
This is why the type in the render prop is typed as unknown
— to push people to type it themselves. I'd suggest typing it explicitly like this:
<HeadlessComboboxOptions>
{({ option } : { option: MyOptionType }) => (
<HeadlessComboboxOption>…</HeadlessComboboxOption>
)}
</HeadlessComboboxOptions>
Hope that helps 👍
from headlessui.
@thecrypticace I actually tried to type it myself but I get this:
typescript version 5.4.5
from headlessui.
If the type was any
instead of unknown
, I think it would work.
from headlessui.
I swear worked at one point but yeah aliasing to a different type does not in function argument position. Will get a fixed merged in for that.
from headlessui.
Related Issues (20)
- Dialog text input React DOM ref not initialized soon enough HOT 2
- <Switch> does not submit form with type="submit"
- <Transition> now requires a `show` prop HOT 2
- Scroll lock behavior change from 2.0.x to 2.1 when using Transition + TransitionChild
- <Dialog> won't open when unmount is set to false HOT 3
- "Invalid prop `data-headlessui-state` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props." HOT 3
- Combobox virtual feature randomly gives an error: Uncaught Error: Unexpected undefined at notUndefined at Virtualizer.getOffsetForIndex HOT 1
- PopoverPanel `focus` prop doesn't work when `transition` prop is set HOT 2
- Type error: incorrect typing of the `as` property of Button HOT 2
- Listbox is broken HOT 1
- Unable to manually close Menu Component
- Dialog element is not removed when closed in playwright & firefox environment HOT 2
- <TransitionChild> does not work when unmount is set to false HOT 2
- `RadioGroup` do not render hidden inputs when given a `name` HOT 1
- Sibling Dialogs can't touch-scroll on mobile HOT 2
- Combobox: When ComboboxInput is clicked combobox gets closed HOT 2
- React warning `Warning: Function components cannot be given refs.` and wrong visual placement of combobox options, when using `as={React.Fragment}` alongside Framer Motion's `motion.div` and `AnimatePresence` for immediate comboboxes
- Menu gets closed when user click outside, but event propagation seems suppressed HOT 1
- Better support for exactOptionalPropertyTypes: true
- Combobox virtual types don't work when multiple is true
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from headlessui.