Dialog uses open/closed state from Context over props

[jaredpereira]

What package within Headless UI are you using?
@headlessui/react

What version of that package are you using?
1.5.0

Reproduction URL
https://codesandbox.io/s/headless-bug-repro-3fz4dz?file=/src/App.js

Hi!
I ran into this when triggering a Dialog to open from inside a Disclosure component. It was a little surprising as the docs say

Dialogs have no automatic management of their open/closed state.

In any case this seems to be where the passed in value is getting over ridden if I am understanding the code correctly.

I think the best course of action is to remove all references to usesOpenClosedState but if not, preferring the passed in value makes sense!

headlessui/packages/@headlessui-react/src/components/dialog/dialog.tsx

Lines 174 to 180 in ab6310c

	let visible = (() => {
	if (usesOpenClosedState !== null) {
	return usesOpenClosedState === State.Open
	}
	return dialogState === DialogStates.Open
	})()

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

This is indeed a bug and we should prefer local props over context information. The reason this exists is to make Transitions easier. Here is an example: https://headlessui.dev/react/menu#transitions

Currently working on React 18 compatibility so this won't be fixed immediately.

[gusflopes]

Run into the same bug.
I'm using these packages:
"@headlessui/react": "^1.5.0"
"next": "12.1.4",
"react": "^18.0.0",
"react-dom": "^18.0.0",

The dropdown that uses Disclosure components won't work unless i change reactStrictMode to false on next.config.js:
Seems to be related to compatibility issue after updating to React 18.

Should we keep using React 17 for now? Just following this issue for now.

[RobinMalfait]

@gusflopes you are describing a React 18 issue, checkout the pinned issue #681. I'm also confused about what you mean with a "Dropdown" that uses the "Disclosure" component 🤔

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

This should be fixed by #1360, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders or yarn add @headlessui/react@insiders.
• npm install @headlessui/vue@insiders or yarn add @headlessui/vue@insiders.

Here is an updated CodeSandbox: https://codesandbox.io/s/headless-bug-repro-forked-29kf0e