Close on outside click

[vickyRathee]

When the mutli-select is used in dialog, it doesn't close the popover on outside click. For example, I selected team members and just clicked on "Submit" button which didn't triggered the setIsPopoverOpen: false and resulted in screen freeze due to pointer-events: none; was never removed from the body.

 <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-2xl">
        <DialogHeader>
          <DialogTitle>{service ? "Edit Service" : "Add Service"}</DialogTitle>
        </DialogHeader>

        <form onSubmit={handleSubmit} className="space-y-6">
            <div className="space-y-2">
              <Label>Service Name</Label>
              <Input
                value={formData.name}
                onChange={(e) =>
                  setFormData({ ...formData, name: e.target.value })
                }
                placeholder="Enter service name"
                required
              />
            </div>
            <div className="space-y-2">
              <Label>Team Members</Label>
              <MultiSelect
                options={users.map((x) => ({
                  label: `${x.name}`,
                  value: `${x.user_id}`,
                }))}
                defaultValue={formData.members}
                onValueChange={(members) =>
                  setFormData({ ...formData, members })
                }
                placeholder="Select members..."
                modalPopover={true}
              />
            </div>
          </div>

          <div className="flex justify-end gap-2">
            <Button type="submit">
               Submit
            </Button>
          </div>
        </form>

[s3f5]

Hey @vickyRathee , the issue is that popover doesn't properly sync its state with the dialog's. You would just need to sync the states between them both and prevent the onInteractOutside of the dialog in the background if popover is open in the foreground.

Ya can go with simple hook if the state is scoped, other wise just go for zustand or any state of your choice.

import { useState } from "react";

export const useNestedModals = () => {
  const [isNestedOpen, setIsNestedOpen] = useState(false);

  const toggleNestedModal = (state?: boolean) =>
    setIsNestedOpen((prev) => (state !== undefined ? state : !prev));

  const handleInteractOutside = (e: Event) => {
    if (isNestedOpen) {
      e.preventDefault();
    }
  };

  return {
    isNestedOpen,
    toggleNestedModal,
    handleInteractOutside,
  };
};

then just simple intergrate it into your code:

const { handleInteractOutside, toggleNestedModal } = useNestedModals();

 <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-2xl" onInteractOutside={handleInteractOutside}>
        <DialogHeader>
          <DialogTitle>{service ? "Edit Service" : "Add Service"}</DialogTitle>
        </DialogHeader>

        <form onSubmit={handleSubmit} className="space-y-6">
            <div className="space-y-2">
              <Label>Service Name</Label>
              <Input
                value={formData.name}
                onChange={(e) =>
                  setFormData({ ...formData, name: e.target.value })
                }
                placeholder="Enter service name"
                required
              />
            </div>
            <div className="space-y-2">
              <Label>Team Members</Label>
              <MultiSelect
                options={users.map((x) => ({
                  label: `${x.name}`,
                  value: `${x.user_id}`,
                }))}
                defaultValue={formData.members}
                onValueChange={(members) =>
                  setFormData({ ...formData, members })
                }
               onOpenChange={toggleNestedModal} // required change from #51 
                placeholder="Select members..."
                modalPopover={true}
              />
            </div>
          </div>

          <div className="flex justify-end gap-2">
            <Button type="submit">
               Submit
            </Button>
          </div>
        </form>

You will need this one #51