Prefer incoming open prop over OpenClosed state (#1360)

* prefer incoming `open` prop over OpenClosed state

* update changelog

Author: RobinMalfait

CHANGELOG.md

@@ -37,6 +37,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Allow `Enter` for form submit in `RadioGroup`, `Switch` and `Combobox` improvements ([#1285](https://github.com/tailwindlabs/headlessui/pull/1285))
 - add React 18 compatibility ([#1326](https://github.com/tailwindlabs/headlessui/pull/1326))
 - Add explicit `multiple` prop ([#1355](https://github.com/tailwindlabs/headlessui/pull/1355))
+- Prefer incoming `open` prop over OpenClosed state ([#1360](https://github.com/tailwindlabs/headlessui/pull/1360))
 
 ### Added
 
@@ -78,6 +79,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Allow `Enter` for form submit in `RadioGroup`, `Switch` and `Combobox` improvements ([#1285](https://github.com/tailwindlabs/headlessui/pull/1285))
 - Add explicit `multiple` prop ([#1355](https://github.com/tailwindlabs/headlessui/pull/1355))
 - fix `nullable` prop for Vue ([2b109548b1a94a30858cf58c8f525554a1c12cbb](https://github.com/tailwindlabs/headlessui/commit/2b109548b1a94a30858cf58c8f525554a1c12cbb))
+- Prefer incoming `open` prop over OpenClosed state ([#1360](https://github.com/tailwindlabs/headlessui/pull/1360))
 
 ### Added
 

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

@@ -173,13 +173,6 @@ let DialogRoot = forwardRefWithAs(function Dialog<
   }
 
   let dialogState = open ? DialogStates.Open : DialogStates.Closed
-  let visible = (() => {
-    if (usesOpenClosedState !== null) {
-      return usesOpenClosedState === State.Open
-    }
-
-    return dialogState === DialogStates.Open
-  })()
 
   let [state, dispatch] = useReducer(stateReducer, {
     titleId: null,
@@ -357,7 +350,7 @@ let DialogRoot = forwardRefWithAs(function Dialog<
                     slot,
                     defaultTag: DEFAULT_DIALOG_TAG,
                     features: DialogRenderFeatures,
-                    visible,
+                    visible: dialogState === DialogStates.Open,
                     name: 'Dialog',
                   })}
                 </DescriptionProvider>

packages/@headlessui-vue/src/components/dialog/dialog.ts

@@ -113,14 +113,6 @@ export let Dialog = defineComponent({
     }
 
     let dialogState = computed(() => (open.value ? DialogStates.Open : DialogStates.Closed))
-    let visible = computed(() => {
-      if (usesOpenClosedState !== null) {
-        return usesOpenClosedState.value === State.Open
-      }
-
-      return dialogState.value === DialogStates.Open
-    })
-
     let enabled = computed(() => dialogState.value === DialogStates.Open)
 
     let hasNestedDialogs = computed(() => nestedDialogCount.value > 1) // 1 is the current dialog
@@ -307,7 +299,7 @@ export let Dialog = defineComponent({
                 slot,
                 attrs,
                 slots,
-                visible: visible.value,
+                visible: dialogState.value === DialogStates.Open,
                 features: Features.RenderStrategy | Features.Static,
                 name: 'Dialog',
               })