Comments (1)
Hey!
Unfortunately the way the as
prop works means that we merge all the props from our component ComboboxOptions
and the underlying component motion.dev
. This means that technically speaking every new feature we add could lead to problems when prop names collide.
The good thing is that the as={Component}
prop is just a shorthand, but you can write the tiny bit longer form to make it work:
<ComboboxOptions as={Fragment}>
<motion.div
transition={{ease: "linear", duration: 2}}
initial={{ y: -20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
exit={{ y: -20, opacity: 0 }}>
…
</motion.div>
</ComboboxOptions>
Whenever you use as={Fragment}
, Headless UI will forward the internal DOM related props to the first child, in this case motion.div
, but this will only include DOM related props such as attributes (aria-*
, data-*
, ...) and event listeners (onClick
, ...)
This way the transition
prop doesn't conflict.
Hope this helps!
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.