Command Input inside Popover which is inside a Sheet is not working (shadcn)

Question

This is my UI I have a Command Input inside the Popover for MultiSelect but I am not able to click on the Input and type anything. It treats the CommandInput as if its not even there. I added pointer-events-auto and did a console.log when clicked on CommandInput so it was printing but still I am not able to type in the Input and search.

Here is my Sheet component and I am using my own MultiSelect component.
I have also attached my MultiSelect component.

import * as React from "react";
import { cva } from "class-variance-authority";
import { CheckIcon, XCircle, ChevronDown, XIcon, WandSparkles } from "lucide-react";

import { cn } from "@/lib/utils";
import { Separator } from "@/components/ui/separator";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
} from "@/components/ui/command";


const multiSelectVariants = cva("m-1 transition ease-in-out duration-300", {
  variants: {
    variant: {
      default: "border-foreground/10 text-foreground bg-card hover:bg-card/80",
      secondary: "border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80",
      destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
      inverted: "inverted",
    },
  },
  defaultVariants: {
    variant: "default",
  },
});

export const MultiSelect = React.forwardRef(
  (
    {
      options,
      onValueChange,
      variant,
      defaultValue = [],
      placeholder = "Select options",
      animation = 0,
      maxCount = 3,
      asChild = false,
      className,
      ...props
    },
    ref
  ) => {
    const [selectedValues, setSelectedValues] = React.useState(defaultValue);
    const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
    const [isAnimating, setIsAnimating] = React.useState(false);
    const [triggerWidth, setTriggerWidth] = React.useState(0);
    const triggerRef = React.useRef(null);

    React.useEffect(() => {
      if (triggerRef.current) {
        const resizeObserver = new ResizeObserver((entries) => {
          for (let entry of entries) {
            setTriggerWidth(entry.contentRect.width);
          }
        });

        resizeObserver.observe(triggerRef.current);

        return () => {
          resizeObserver.disconnect();
        };
      }
    }, [triggerRef]);

    React.useEffect(() => {
      if (JSON.stringify(selectedValues) !== JSON.stringify(defaultValue)) {
        setSelectedValues(defaultValue);
      }
    }, [defaultValue, selectedValues]);

    const handleInputKeyDown = (event) => {
      if (event.key === "Enter") {
        setIsPopoverOpen(true);
      } else if (event.key === "Backspace" && !event.currentTarget.value) {
        const newSelectedValues = [...selectedValues];
        newSelectedValues.pop();
        setSelectedValues(newSelectedValues);
        onValueChange(newSelectedValues);
      }
    };

    const toggleOption = (value) => {
      const newSelectedValues = selectedValues.includes(value)
        ? selectedValues.filter((v) => v !== value)
        : [...selectedValues, value];
      setSelectedValues(newSelectedValues);
      onValueChange(newSelectedValues);
    };

    const handleClear = () => {
      setSelectedValues([]);
      onValueChange([]);
    };

    const handleTogglePopover = () => {
      setIsPopoverOpen((prev) => !prev);
    };

    const clearExtraOptions = () => {
      const newSelectedValues = selectedValues.slice(0, maxCount);
      setSelectedValues(newSelectedValues);
      onValueChange(newSelectedValues);
    };

    return (
      
        
          
        
         setIsPopoverOpen(false)}
          style={{ width: `${triggerWidth + 10}px`, maxWidth: "92vw" }}
        >
          
            
            
              No results found.
              
                 {
                    const allValues = options.map((option) => option.value);
                    const allSelected = allValues.every((value) => selectedValues.includes(value));
                    setSelectedValues(allSelected ? [] : allValues);
                    onValueChange(allSelected ? [] : allValues);
                  }}
                  style={{ pointerEvents: "auto", opacity: 1 }}
                  className="cursor-pointer"
                >
                   option.value).every((value) => selectedValues.includes(value))
                        ? "bg-primary text-primary-foreground"
                        : "opacity-50 [&_svg]:invisible"
                    )}
                  >
                    
                  
                  Select All
                
                {options.map((option) => {
                  const isSelected = selectedValues.includes(option.value);
                  return (
                     toggleOption(option.value)}
                      style={{ pointerEvents: "auto", opacity: 1 }}
                      className="cursor-pointer"
                    >
                      
                        
                      
                      {option.icon && }
                      {option.label}
                    
                  );
                })}
              
              
              
              
                
                  {selectedValues.length > 0 && (
                    <>
                      
                        Clear
                      
                      
                    
                  )}
                  
                   setIsPopoverOpen(false)}
                    style={{ pointerEvents: "auto", opacity: 1 }}
                    className="flex-1 justify-center cursor-pointer"
                  >
                    Close
                  
                
              
            
          
        
        {animation > 0 && selectedValues.length > 0 && (
           setIsAnimating(!isAnimating)}
          />
        )}
      
    );
  }
);

MultiSelect.displayName = "MultiSelect";

import React, { useState } from "react";
import { Sheet, SheetContent, SheetHeader, SheetFooter, SheetTitle } from "@/components/ui/sheet";
import { MultiSelect } from "@/components/ui/multi-select";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { saveApprovalRequest } from "@/utils/api/client/orders/create/approval/api";
import MultiSelectInSheet from "./MultiSelectInSheet";

const ApprovalSheet = ({ open, approvalData, setOpen }) => {
  const [selectedUsers, setSelectedUsers] = useState([]);

  const userDetails = approvalData?.[0]?.permission_user_details || [];

  const userOptions = userDetails.map((user) => ({
    value: user.user_id,
    label: user.user_name,
  }));

  return (
    
      
        
          Manage Approvals
        
        
          Users
          
            
          
        
        
          
        
      
    
  );
};

export default ApprovalSheet;

I have already tried creating a new MultiSelect and tried using "pointer-events-auto". Also when I try clicking on the part of Input below which there is a button it seems that the button gets clicked. I have also tried z-indexing them both.

Command Input inside Popover which is inside a Sheet is not working (shadcn)

Answers (1)

Related Questions