Dialog is not being modal [bug]:

[regnna]

Describe the bug

this form suppose to be a modal form but it is ruining my page

PostNewJob

`

<Button onClick={()=>setShowJobDialog(true)} className=" flex h-11 items-center justify-center px-5" // disabled={isBtnDisabled}

Post A Job

{ setShowJobDialog(false); setJobFormData({ ...initialPostNewJobFormData, companyName: profileInfo?.recruiterInfo?.companyName, }); }}

    <DialogContent className="md:min-w-md  lg:min-w-lg lg:mt-20 h-[400px] lg:h-[400px] overflow-auto md:w-[800px] items-center  lg:ml-96 lg:pr-5 lg:w-[900px] sm:w-[300ox]">
      <DialogHeader>
        <DialogTitle>Post New Job</DialogTitle>
        <div className="Grid gap-4 py-4">
          <CommonForm
            buttonText={"Add"}
            formData={jobFormData}
            setFormData={setJobFormData}
            formControls={postNewJobFormControls}
            isBtnDisabled={!handlePostNewBtnValid()}
            action={createNewJob}
          />
        </div>
      </DialogHeader>
    </DialogContent>
  </Dialog>
  </div>
</div>`

this is my code dont mind those tailwind css's(just to deal it temporarily  

go through modal component & calling that component from

Affected component/components

Dialog

How to reproduce

Dialog component is not behaving as modal component

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

windows, nextJS-14.2.3

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues

[dilyandimitrov]

I experience the same issue - the Dialog is not acting as modal, started considering moving to AlertDialog or ditch it at all.

[vermi4elli]

I had the same issue. After "consulting" with Claude, I moved all wrapping Dialogs into separate components (DialogComponent, which uses its own

...

inside instead of having one wrapped at its parent object).

Their parent is mapping a collection of items, for each of those a DialogComponent is returned. That basically solved the issue.

Claude stands out when given enough context, I really do advise using it for such stubborn issues.

[dilyandimitrov]

I had the same issue. After "consulting" with Claude, I moved all wrapping Dialogs into separate components (DialogComponent, which uses its own ... inside instead of having one wrapped at its parent object).

Their parent is mapping a collection of items, for each of those a DialogComponent is returned. That basically solved the issue.

Claude stands out when given enough context, I really do advise using it for such stubborn issues.

Is there a way to give me an example what you actually did? If you have some real code you can show it would be nice?

[vermi4elli]

Sure, the example code for parent and child components is something like this:

function ComponentsList({ selectedPackage }: { selectedPackage: Package }) {
  return (
    <div className="overflow-y-scroll">
      {selectedPackage.components.map((component: PackageComponent) => (
        <ComponentCard key={component._id} component={component} />
      ))}
    </div>
  );
}

function ComponentCard({ component }: { component: PackageComponent }) {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Card>
          <CardContent>{component.content}</CardContent>
        </Card>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>...</DialogTitle>
          <DialogDescription>...</DialogDescription>
        </DialogHeader>
        ...
        <DialogFooter>
          <Button type="submit">Submit changes</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}