Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Error closing Dialog when initial state is set with something other than `ref(true)`

See original GitHub issue

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

0.3.1-6fa6c45

What browser are you using?

Firefox

Reproduction repository

https://codesandbox.io/s/jovial-snowflake-p4s76?file=/src/Modal.vue

Description

If the value passed in as the open prop of a Dialog is created with something other than literally ref(true) or ref(false), updating it causes this error: Set operation on key "open" failed: target is readonly..

E.g. I’m trying to create a generic Modal wrapper component to use in a few places, so I want open and @close available outside of the component using the Dialog. If I try to pass in open as a prop though, I can’t seem to use it without that ‘readonly’ error.

Given this component:

<template>
  <Dialog as="template" :open="open" @close="onClose" static>
    <div>
      <DialogOverlay v-if="open" />

      <div v-if="open">
        <slot />
      </div>
    </div>
  </Dialog>
</template>

<script>
import { toRefs } from "vue";
import { Dialog, DialogOverlay } from "@headlessui/vue";

export default {
  components: { Dialog, DialogOverlay },
  props: { open: Boolean },
  emits: ["close"],
  setup(props, { emit }) {
    const { open } = toRefs(props);

    return {
      open,
      onClose(val) {
        open.value = val;
        emit("close");
      },
    };
  },
};
</script>

Changing the open prop works (can close the Dialog this way) but produces the error, but clicking outside the Dialog or pressing <kbd>Esc</kbd> produce the error and also don’t actually work.