material-tailwind Rendering Dialog will generate aria-hidden errors.

Having a simple modal Dialog which opens from a button will generate some aria-hidden <div tabindex="-1" class="relative m-4 rounded-lg text-blue-gray-500 antialiased font-sans text-base font-light leading-relaxed w-full md:w-3/5 lg:w-2/5 2xl:w-1/4 min-w-[80%] md:min-w-[60%] lg:min-w-[40%] 2xl:min-w-[25%] max-w-[80%] md:max-w-[60%] lg:max-w-[40%] 2xl:max-w-[25%] bg-transparent shadow-none" aria-labelledby=":rp:-label" aria-describedby=":rp:-description" id=":rq:" role="dialog" style="opacity: 0.0138885; transform: translateY(-49.3056px) translateZ(0px);">…</div> in not contained inside <body cz-shortcut-listen="true" style="overflow: hidden; padding-right: 0px;" data-floating-ui-scroll-lock>…</body> . Doing nothing errors. Is there any way to get rid of the errors?

Nov 06 '23 08:11 mirifi2k

same problem here! :(

node version: v18.18.2 material-tailwind/react: v2.1.4

Nov 07 '23 23:11 ViniciusTxr

Same here as well.

Node: v18.16.0 material-tailwind/react: v2.1.4

Dec 01 '23 17:12 andrewstimsonagility

Same here

Node: v20.10.0 material-tailwind/react: v2.1.6 react: v18.2.0 react-dom: v18.2.0

Dec 14 '23 06:12 nicholaslau21

As I understood, it happens when initial state is set to open: open={true} In this case parent container is not ready, I guess, so need to give time for whole component to load and only then immediately setup the opened state, so here is a solution using setTimeout

const [ open, setOpen ] = useState<boolean>(false)

  useEffect(() => {
      setTimeout((): void => setOpen(true), 1)
  }, [])
  
  <Dialog open={ open } handler={ () => console.log('some handler') }>
  Hello world
  </Dialog>

I've implemented it here https://github.com/oleksandr-andrushchenko/ExamMeFront/blob/main/src/components/Auth.tsx

If it helps - star my repos, thank you!

Apr 01 '24 04:04 oleksandr-andrushchenko