How are you supposed to pass slot="title" to Heading for Dialog?

[evadecker]

I'm having issues with this console warning showing up repeatedly. I'm implementing RAC's Modal, Dialog, and Heading. All of my Dialogs contain a nested Heading with slot="title", but I continue to get this warning. I've tried moving the Heading to a dozen different areas within my component markup, have tried changing the nesting of Dialog and Modal, have tried passing down composed render props like defaultChildren, but nothing seems to work.

What am I doing wrong?

[snowystinger]

Your code looks like the example here? https://react-spectrum.adobe.com/react-aria/Dialog.html#example

Do you have a code sample you can share, preferably in a codesandbox or stackblitz?

The most likely culprit otherwise is duplicate packages, please ensure you only have one copy of all of our packages installed.

[evadecker]

Yes, my markup is the same as that example, although I'm implementing my own components (e.g. I have Dialog.tsx which imports Dialog as AriaDialog from RAC and styles / re-exports).

I'll try to put together a codesandbox matching my setup.

[evadecker]

I figured it out, this was a silly misunderstanding, not a bug.

I just realized that all Popover components inherit from Dialog — the warnings were being thrown from Popover components I'm using, not from Modal components. Can mark this as solved!

Is there a recommended way to implement the title for Popover when you don't want it visibly shown? So far I'm doing this...

<Popover>
  <Dialog>
    <Heading slot="title" className="sr-only">{title}</Heading>
    {children}
  </Dialog>
</Popover>

...but not sure if there's a better approach. Might be nice to have an example in the docs, particularly for things like Popover and Select.