Comments (6)
@jussirantala the anchor
prop has an implicit portal={true}
behind the scenes. Both with and without a portal it works as expected for me.
Can you create a minimal reproduction repo and share it here so that I can take a look?
from headlessui.
I got it working, thanks for the fix!
from headlessui.
Hey!
This should be fixed by #3250, and will be available in the next release.
You can already try it using:
npm install @headlessui/react@insiders
.
from headlessui.
Hey!
This should be fixed by #3250, and will be available in the next release.
You can already try it using:
npm install @headlessui/react@insiders
.
@RobinMalfait I tried 0.0.0-insiders.f5ac361
and it still happens 🤔I tried to delete node_modules in case it's a cache issue or something and checked I have that version there.
I'm thinking if you instead should fix the props merging functions to support object props and merging of them. You use mergePropsAdvanced
in Portal
for example. Now it just replaces theirProps.style
with ourProps.style
instead of merging them.
from headlessui.
Hmm, if you are using Next.js for example, make sure to also drop the .next
folder since it contains caches.
They should be merged correctly:
![image](https://private-user-images.githubusercontent.com/1834413/335584851-08e4c21a-f37a-4127-b30f-99688a0455c3.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjExMTEyMzQsIm5iZiI6MTcyMTExMDkzNCwicGF0aCI6Ii8xODM0NDEzLzMzNTU4NDg1MS0wOGU0YzIxYS1mMzdhLTQxMjctYjMwZi05OTY4OGEwNDU1YzMucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcxNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MTZUMDYyMjE0WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZjBiYjBjNWE4MjI4NTJjM2RjYWZhNzk1OGI5ODViYjI5YjJjNDk4YjQ1YWZlMDllOTQwNTY2ZTRlMmQ2MzZjOSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.ad2XkbxCRNgtVSc3dqDGP2d9w2moPgAApt1AuQrt8ew)
![image](https://private-user-images.githubusercontent.com/1834413/335584916-f7f5a55e-5b39-4f59-bb04-e95501315ae9.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjExMTEyMzQsIm5iZiI6MTcyMTExMDkzNCwicGF0aCI6Ii8xODM0NDEzLzMzNTU4NDkxNi1mN2Y1YTU1ZS01YjM5LTRmNTktYmIwNC1lOTU1MDEzMTVhZTkucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcxNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MTZUMDYyMjE0WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9OTJjMTIxY2U0OTgyNDAwZTAxZThhOGQwNDQ2MDU0ZTE5OTE0MGU0M2I5OWQ5YzgyMjRhOTRmMTY1ZGVjZTA4YyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.bQ2-wj1vTGuBvSjWk2XASvMYaR6gQ48c3dYwkhicZpY)
We could merge it in the props merging logic, but this gives us a bit more control on a per component basis. We could still do that, but I think something else is going on.
from headlessui.
Hmm, if you are using Next.js for example, make sure to also drop the
.next
folder since it contains caches.They should be merged correctly:
![]()
We could merge it in the props merging logic, but this gives us a bit more control on a per component basis. We could still do that, but I think something else is going on.
We don't use next.js.
Could you try with portal=true
?
from headlessui.
Related Issues (20)
- React warning `flushSync was called from inside a lifecycle method` when conditionally displaying an immediate and autofocused combobox HOT 1
- React v2.1.1 positions ListboxOptions without anchor attribute set HOT 2
- Popover using anchor prop in PopoverPanel hangs unit test HOT 1
- 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 2
- 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 1
- <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 1
- 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
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.