How do I trigger a Dialog from an outside component?

[samuelneff]

I have a list of icons that I want to trigger a single dialog. The dialog is not showing as a dialog at all; it's just putting the content into the page inline with zero styling or dialog behavior.

My layout is like this:

export function BrowseSection() {
  const [ selectedIcon, setSelectedIcon ] = useState('');

  return (
    <div className={styles.browseSection}>

      <BrowseIconList
        onIconClick={setSelectedIcon}
      />

      <Dialog.Root open={Boolean(selectedIcon)}>
        <Dialog.Content>
          <Dialog.Title>{selectedIcon}</Dialog.Title>

          <div className={styles.browseDetailTable}>
            More content here...
          </div>

          <Dialog.Close>
            <Button onClick={onCloseDialog}>
              Done
            </Button>
          </Dialog.Close>
        </Dialog.Content>
      </Dialog.Root>
    </div>
  );
}

In the actual app these components are further apart from each other in the component hierarchy.

The icon list has over 10,000 items in it when unfiltered.

[vladmoroz]

You'll need to add the onOpenChange prop. Not sure I totally get how your app is supposed to work here, but if I'm reading it right, your current problem would be that the dialog doesn’t close because its open state depends on whether an icon is selected, but isn't cleared when the user attempts to close it.

<Dialog.Root
  open={!!selectedIcon}
  onOpenChange={open => {
    if (!open) {
      setSelectedIcon('');
    }
  }}
/>

Is this what you are looking for?

[samuelneff]

Thank you. That solved it. I don't quite understand how that affected the styling so much but it worked. 👍