How to close a dialog?

[Thecrafterja]

Change Type

Addition

Proposed Changes

Hi,

I think, this function is present in this libary, but I am too stupid to figure out how to close a dialog.
Just adding a Dialog.Close component does not solve my issue.

I think, it would be a good idea to add such an example to the docs, because the dialog example there also does not close when you press the "save" button.

Looking forward to your help :)

[gregmsanderson]

Hi,

Coincidentally I was experimenting with this today and found the same.

It appears that the Dialog does include the ability to close itself without needing to add extra props (such as binding open). It adds a cross icon in the top-right. If you click that, it closes.

However if you compare it to the underlying component on https://www.bits-ui.com/docs/components/dialog that has a <Dialog.Close />. For example you can see its example has::

<Dialog.Close class="inline-flex h-input items-center justify-center rounded-input bg-dark px-[50px] text-[15px] font-semibold text-background shadow-mini hover:bg-dark/95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98">Save</Dialog.Close>

... and ...

<Dialog.Close class="absolute right-5 top-5 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98">
        <div>
          <X class="size-5 text-foreground" />
          <span class="sr-only">Close</span>
        </div>
</Dialog.Close>

Those being its "Save" and "X" buttons.

So ... that's clearly how it "should" be done. Interestingly the shadcn-svelte version has opted to not expose that <Dialog.Close />. I'm not sure if that's deliberate or not.

Assuming it's not, I tried adding it myself ... and it appears to work. I simply modified the ui/dialog/index.js file that shadcn-svelte installs to instead be:

import { Dialog as DialogPrimitive } from 'bits-ui';
const Root = DialogPrimitive.Root;
const Trigger = DialogPrimitive.Trigger;
const Close = DialogPrimitive.Close; // ADDED
import Title from './dialog-title.svelte';
import Portal from './dialog-portal.svelte';
import Footer from './dialog-footer.svelte';
import Header from './dialog-header.svelte';
import Overlay from './dialog-overlay.svelte';
import Content from './dialog-content.svelte';
import Description from './dialog-description.svelte';
export {
	Root,
	Title,
	Portal,
	Footer,
	Header,
	Trigger,
	Overlay,
	Content,
	Description,
  Close, // ADDED
	//
	Root as Dialog,
	Title as DialogTitle,
	Portal as DialogPortal,
	Footer as DialogFooter,
	Header as DialogHeader,
	Trigger as DialogTrigger,
	Overlay as DialogOverlay,
	Content as DialogContent,
	Description as DialogDescription,
  Close as DialogClose // ADDED
};

Now in my code I can add a custom cancel button to the Dialog footer e.g:

<Dialog.Close>
   <Button type="button" variant="ghost">Cancel</Button>
</Dialog.Close>

[Thecrafterja]

Yes, that also works for me, thank you very much

@huntabyte Maybe something that should be changed in the libary, but maybe there was a reason you did not include this?

[o-az]

thank you! I wonder this is not part of the component

[burggraf]

I created this (when using the default close (x) provided):

export const closeDialog = () => {
  const closeButton: any = document.querySelector('button[data-dialog-close]');

  // Check if the button exists to avoid errors
  if (closeButton) {
      // Call the click() method to programmatically click the button
      closeButton.click();
  } else {
      console.error('closeDialog: Close button not found!');
  }        

}

[ytsruh]

Its much easier than this. Just use the underlying bits ui primitive

<AlertDialog.Root bind:open={dialogOpen}>