Wrap CardModal content in form

Author: acelaya

CHANGELOG.md

@@ -4,9 +4,10 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
 
-## [Unreleased]
+## [0.9.4] - 2025-05-29
 ### Added
 * Add `sticky-cell` tailwind utility.
+* Wrap content of `CardModal` in `form`, so that it is possible to trigger confirm actions from inputs.
 
 ### Changed
 * *Nothing*

dev/tailwind/feedback/ModalDialogPage.tsx

@@ -1,7 +1,7 @@
 import { clsx } from 'clsx';
 import type { FC } from 'react';
 import { useState } from 'react';
-import { Button, CardModal, ModalDialog } from '../../../src/tailwind';
+import { Button, CardModal, Input, ModalDialog } from '../../../src/tailwind';
 
 export const ModalDialogPage: FC = () => {
   const [plainDialogOpen, setPlainDialogOpen] = useState(false);
@@ -17,6 +17,8 @@ export const ModalDialogPage: FC = () => {
   const [confirmDisabledOpen, setConfirmDisabledOpen] = useState(false);
   const [dangerConfirmOpen, setDangerConfirmOpen] = useState(false);
 
+  const [formOpen, setFormOpen] = useState(false);
+
   const [contentOpen, setContentOpen] = useState(false);
 
   const [coverOpen, setCoverOpen] = useState(false);
@@ -124,6 +126,28 @@ export const ModalDialogPage: FC = () => {
         Danger dialog with confirm buttons
       </CardModal>
 
+      <div className="tw:flex tw:flex-col tw:gap-y-2">
+        <h2>Card modal with form</h2>
+        <div className="tw:flex tw:gap-x-2">
+          <Button onClick={() => setFormOpen(true)}>With form</Button>
+        </div>
+      </div>
+
+      <CardModal
+        size="md"
+        title="Dialog with form"
+        variant="danger"
+        open={formOpen}
+        onClose={() => setFormOpen(false)}
+        onConfirm={() => setFormOpen(false)}
+        onClosed={(exitAction) => console.log(`Closed form dialog: ${exitAction}`)}
+      >
+        <div className="tw:flex tw:flex-col tw:gap-3">
+          <Input placeholder="Foo" name="foo" />
+          <Input placeholder="Bar" name="bar" />
+        </div>
+      </CardModal>
+
       <div className="tw:flex tw:flex-col tw:gap-y-2">
         <h2>Card modal with a lot of content</h2>
         <div className="tw:flex tw:gap-x-2">

src/tailwind/feedback/CardModal.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import type { FC, ReactNode } from 'react';
+import type { FC, FormEvent, ReactNode } from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Button, CloseButton } from '../form';
 import { LinkButton } from '../navigation';
@@ -75,11 +75,13 @@ export const CardModal: FC<CardModalProps> = ({
   // Proxy the open/close modal state via an auxiliary variable, so that we can delay transitioning to `open=false`
   // after a CSS transition has ended.
   const [openProxy, setOpenProxy] = useState(open);
-  const ref = useRef<HTMLDivElement>(null);
+  const ref = useRef<HTMLFormElement>(null);
 
   // Track what was the exit action, so that we can call onConfirmed with the right value, once close transition ended
   const exitAction = useRef<ExitAction>('cancel');
-  const confirm = useCallback(() => {
+  const confirm = useCallback((e: FormEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
     exitAction.current = 'confirm';
     onConfirm?.();
   }, [onConfirm]);
@@ -142,7 +144,7 @@ export const CardModal: FC<CardModalProps> = ({
       )}
       {...restDialogProps}
     >
-      <div
+      <form
         data-testid="transition-container"
         ref={ref}
         className={clsx(
@@ -161,6 +163,7 @@ export const CardModal: FC<CardModalProps> = ({
           },
           { 'tw:h-full': variant === 'cover' },
         )}
+        onSubmit={confirm}
       >
         <Card className={clsx(
           'tw:w-full',
@@ -204,7 +207,7 @@ export const CardModal: FC<CardModalProps> = ({
                     solid
                     variant={variant === 'danger' ? 'danger' : 'primary'}
                     disabled={confirmDisabled}
-                    onClick={confirm}
+                    type="submit"
                   >
                     {confirmText}
                   </Button>
@@ -213,7 +216,7 @@ export const CardModal: FC<CardModalProps> = ({
             </>
           )}
         </Card>
-      </div>
+      </form>
     </ModalDialog>
   );
 };

test/tailwind/feedback/__snapshots__/CardModal.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`<CardModal /> > renders expected size 1`] = `
   class="tw:bg-transparent tw:backdrop:bg-black/50 tw:flex tw:w-screen tw:h-screen tw:max-w-screen tw:max-h-screen"
   open=""
 >
-  <div
+  <form
     class="tw:w-full tw:m-auto tw:p-4 tw:sm:p-6 tw:-translate-y-4 tw:data-open:translate-y-0 tw:opacity-0 tw:data-open:opacity-100 tw:transition-[opacity_,_translate] tw:duration-300 tw:sm:w-sm"
     data-open=""
     data-testid="transition-container"
@@ -53,7 +53,7 @@ exports[`<CardModal /> > renders expected size 1`] = `
         </div>
       </div>
     </div>
-  </div>
+  </form>
 </dialog>
 `;
 
@@ -62,7 +62,7 @@ exports[`<CardModal /> > renders expected size 2`] = `
   class="tw:bg-transparent tw:backdrop:bg-black/50 tw:flex tw:w-screen tw:h-screen tw:max-w-screen tw:max-h-screen"
   open=""
 >
-  <div
+  <form
     class="tw:w-full tw:m-auto tw:p-4 tw:sm:p-6 tw:-translate-y-4 tw:data-open:translate-y-0 tw:opacity-0 tw:data-open:opacity-100 tw:transition-[opacity_,_translate] tw:duration-300 tw:md:w-lg"
     data-open=""
     data-testid="transition-container"
@@ -110,7 +110,7 @@ exports[`<CardModal /> > renders expected size 2`] = `
         </div>
       </div>
     </div>
-  </div>
+  </form>
 </dialog>
 `;
 
@@ -119,7 +119,7 @@ exports[`<CardModal /> > renders expected size 3`] = `
   class="tw:bg-transparent tw:backdrop:bg-black/50 tw:flex tw:w-screen tw:h-screen tw:max-w-screen tw:max-h-screen"
   open=""
 >
-  <div
+  <form
     class="tw:w-full tw:m-auto tw:p-4 tw:sm:p-6 tw:-translate-y-4 tw:data-open:translate-y-0 tw:opacity-0 tw:data-open:opacity-100 tw:transition-[opacity_,_translate] tw:duration-300 tw:md:w-4xl"
     data-open=""
     data-testid="transition-container"
@@ -167,7 +167,7 @@ exports[`<CardModal /> > renders expected size 3`] = `
         </div>
       </div>
     </div>
-  </div>
+  </form>
 </dialog>
 `;
 
@@ -176,7 +176,7 @@ exports[`<CardModal /> > renders expected size 4`] = `
   class="tw:bg-transparent tw:backdrop:bg-black/50 tw:flex tw:w-screen tw:h-screen tw:max-w-screen tw:max-h-screen"
   open=""
 >
-  <div
+  <form
     class="tw:w-full tw:m-auto tw:p-4 tw:sm:p-6 tw:-translate-y-4 tw:data-open:translate-y-0 tw:opacity-0 tw:data-open:opacity-100 tw:transition-[opacity_,_translate] tw:duration-300 tw:md:w-6xl"
     data-open=""
     data-testid="transition-container"
@@ -224,7 +224,7 @@ exports[`<CardModal /> > renders expected size 4`] = `
         </div>
       </div>
     </div>
-  </div>
+  </form>
 </dialog>
 `;
 
@@ -233,7 +233,7 @@ exports[`<CardModal /> > renders expected variant 1`] = `
   class="tw:bg-transparent tw:backdrop:bg-black/50 tw:flex tw:w-screen tw:h-screen tw:max-w-screen tw:max-h-screen"
   open=""
 >
-  <div
+  <form
     class="tw:w-full tw:m-auto tw:p-4 tw:sm:p-6 tw:-translate-y-4 tw:data-open:translate-y-0 tw:opacity-0 tw:data-open:opacity-100 tw:transition-[opacity_,_translate] tw:duration-300 tw:md:w-lg"
     data-open=""
     data-testid="transition-container"
@@ -292,13 +292,13 @@ exports[`<CardModal /> > renders expected variant 1`] = `
         </button>
         <button
           class="tw:flex tw:gap-2 tw:items-center tw:justify-center tw:border tw:rounded-md tw:no-underline tw:transition-colors tw:focus-ring tw:px-3 tw:py-1.5 tw:border-lm-brand tw:dark:border-dm-brand tw:text-white tw:bg-lm-brand tw:dark:bg-dm-brand tw:highlight:bg-lm-brand-dark tw:dark:highlight:bg-dm-brand-dark tw:highlight:border-lm-brand-dark tw:dark:highlight:border-dm-brand-dark tw:highlight:bg-lm-brand tw:dark:highlight:bg-dm-brand"
-          type="button"
+          type="submit"
         >
           Confirm
         </button>
       </div>
     </div>
-  </div>
+  </form>
 </dialog>
 `;
 
@@ -307,7 +307,7 @@ exports[`<CardModal /> > renders expected variant 2`] = `
   class="tw:bg-transparent tw:backdrop:bg-black/50 tw:flex tw:w-screen tw:h-screen tw:max-w-screen tw:max-h-screen"
   open=""
 >
-  <div
+  <form
     class="tw:w-full tw:m-auto tw:p-4 tw:sm:p-6 tw:-translate-y-4 tw:data-open:translate-y-0 tw:opacity-0 tw:data-open:opacity-100 tw:transition-[opacity_,_translate] tw:duration-300 tw:md:w-lg"
     data-open=""
     data-testid="transition-container"
@@ -366,13 +366,13 @@ exports[`<CardModal /> > renders expected variant 2`] = `
         </button>
         <button
           class="tw:flex tw:gap-2 tw:items-center tw:justify-center tw:border tw:rounded-md tw:no-underline tw:transition-colors tw:focus-ring-danger tw:px-3 tw:py-1.5 tw:border-danger tw:text-white tw:bg-danger tw:highlight:bg-danger-dark tw:highlight:border-danger-dark tw:highlight:bg-danger"
-          type="button"
+          type="submit"
         >
           Confirm
         </button>
       </div>
     </div>
-  </div>
+  </form>
 </dialog>
 `;
 
@@ -381,7 +381,7 @@ exports[`<CardModal /> > renders expected variant 3`] = `
   class="tw:bg-transparent tw:backdrop:bg-black/50 tw:flex tw:w-screen tw:h-screen tw:max-w-screen tw:max-h-screen tw:overflow-hidden"
   open=""
 >
-  <div
+  <form
     class="tw:w-full tw:m-auto tw:p-4 tw:sm:p-6 tw:-translate-y-4 tw:data-open:translate-y-0 tw:opacity-0 tw:data-open:opacity-100 tw:transition-[opacity_,_translate] tw:duration-300 tw:h-full"
     data-open=""
     data-testid="transition-container"
@@ -425,6 +425,6 @@ exports[`<CardModal /> > renders expected variant 3`] = `
         </div>
       </div>
     </div>
-  </div>
+  </form>
 </dialog>
 `;