Merge pull request #462 from tailwindlabs/develop

Next release

CHANGELOG.md

@@ -7,11 +7,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased - React]
 
-- Nothing yet!
+### Fixes
+
+- Fix form submission within Dialog ([#460](https://github.com/tailwindlabs/headlessui/pull/460))
 
 ## [Unreleased - Vue]
 
-- Nothing yet!
+### Fixes
+
+- Fix form submission within Dialog ([#460](https://github.com/tailwindlabs/headlessui/pull/460))
+- Fix TypeScript types for `Listbox` and `Switch` ([#459](https://github.com/tailwindlabs/headlessui/pull/459), [#461](https://github.com/tailwindlabs/headlessui/pull/461))
 
 ## [@headlessui/react@v1.1.0] - 2021-04-26
 

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

@@ -533,6 +533,35 @@ describe('Mouse interactions', () => {
     })
   )
 
+  it(
+    'should be possible to submit a form inside a Dialog',
+    suppressConsoleLogs(async () => {
+      let submitFn = jest.fn()
+      function Example() {
+        let [isOpen, setIsOpen] = useState(true)
+        return (
+          <Dialog open={isOpen} onClose={setIsOpen}>
+            <form onSubmit={submitFn}>
+              <input type="hidden" value="abc" />
+              <button type="submit">Submit</button>
+            </form>
+            <TabSentinel />
+          </Dialog>
+        )
+      }
+      render(<Example />)
+
+      // Verify it is open
+      assertDialog({ state: DialogState.Visible })
+
+      // Submit the form
+      await click(getByText('Submit'))
+
+      // Verify that the submitFn function has been called
+      expect(submitFn).toHaveBeenCalledTimes(1)
+    })
+  )
+
   it(
     'should stop propagating click events when clicking on an element inside the Dialog',
     suppressConsoleLogs(async () => {

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

@@ -244,7 +244,6 @@ let DialogRoot = forwardRefWithAs(function Dialog<
     'aria-labelledby': state.titleId,
     'aria-describedby': describedby,
     onClick(event: ReactMouseEvent) {
-      event.preventDefault()
       event.stopPropagation()
     },
 

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

@@ -652,6 +652,43 @@ describe('Mouse interactions', () => {
     })
   )
 
+  it(
+    'should be possible to submit a form inside a Dialog',
+    suppressConsoleLogs(async () => {
+      let submitFn = jest.fn()
+      renderTemplate({
+        template: `
+          <Dialog v-if="true" :open="isOpen" @close="setIsOpen">
+            <form @submit.prevent="submitFn">
+              <input type="hidden" value="abc" />
+              <button type="submit">Submit</button>
+            </form>
+            <TabSentinel />
+          </Dialog>
+        `,
+        setup() {
+          let isOpen = ref(true)
+          return {
+            isOpen,
+            submitFn,
+            setIsOpen(value: boolean) {
+              isOpen.value = value
+            },
+          }
+        },
+      })
+
+      // Verify it is open
+      assertDialog({ state: DialogState.Visible })
+
+      // Submit the form
+      await click(getByText('Submit'))
+
+      // Verify that the submitFn function has been called
+      expect(submitFn).toHaveBeenCalledTimes(1)
+    })
+  )
+
   it(
     'should stop propagating click events when clicking on an element inside the Dialog',
     suppressConsoleLogs(async () => {

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

@@ -236,7 +236,6 @@ export let Dialog = defineComponent({
       titleId,
       describedby,
       handleClick(event: MouseEvent) {
-        event.preventDefault()
         event.stopPropagation()
       },
 

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

@@ -78,7 +78,7 @@ export let Listbox = defineComponent({
   props: {
     as: { type: [Object, String], default: 'template' },
     disabled: { type: [Boolean], default: false },
-    modelValue: { type: [Object, String, Number, Boolean], default: null },
+    modelValue: { type: [Object, String, Number, Boolean] },
   },
   setup(props, { slots, attrs, emit }) {
     let { modelValue, disabled, ...passThroughProps } = props
@@ -445,7 +445,7 @@ export let ListboxOption = defineComponent({
   name: 'ListboxOption',
   props: {
     as: { type: [Object, String], default: 'li' },
-    value: { type: [Object, String], default: null },
+    value: { type: [Object, String] },
     disabled: { type: Boolean, default: false },
     class: { type: [String, Function], required: false },
     className: { type: [String, Function], required: false },

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

@@ -61,7 +61,7 @@ export let Switch = defineComponent({
   emits: ['update:modelValue'],
   props: {
     as: { type: [Object, String], default: 'button' },
-    modelValue: { type: [Object, Boolean], default: null },
+    modelValue: { type: Boolean, default: false },
     class: { type: [String, Function], required: false },
     className: { type: [String, Function], required: false },
   },