Input inside of a popover triggger

[H7ioo]

I have input inside of the Popover.Trigger and when pressing the Space key it triggers the keyboard interactions so I disabled it from the Popover.Trigger but the input inside of the component still fires the interaction and I can't disable pressing Space because duhh it is an input.

Any ideas about how to fix this issue?

• I tried controlling the input and slicing but if the cursor is in the middle when pressing space it push the cursor to the end

     <PopoverTrigger
          className="relative w-full">
          <Input
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            onKeyDown={(e) => {
              const cursorIndex = e.currentTarget.selectionStart;
              // I have to use this workaround because Radix doesn't support disabling keyboard actions and I have input so disabling the space can't be an option
              if (e.key === " ") {
                e.preventDefault();
                setSearchQuery(
                  (prev) =>
                    prev.slice(0, cursorIndex!) +
                    " " +
                    prev.slice(cursorIndex!),
                );
              }
            }}
          />
        </PopoverTrigger>

[H7ioo]

a clue about what I'm working on

[johirhaquedipok]

Hey, How did you solve onClick issue, when user click on the input field second time the popover gets closed.

[H7ioo]

My workaround:

    const [isOpen, setIsOpen] = useState(false);
    const inputRef = useRef<HTMLInputElement | null>(null);
    const [inputIndex, setInputIndex] = useState(0);

    useEffect(() => {
      inputRef.current!.selectionStart = inputIndex + 1;
      inputRef.current!.selectionEnd = inputIndex + 1;
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [searchQuery]);


        <Popover
          onOpenChange={(open) => setIsOpen(open)}
          open={isLoading ? false : isOpen}
        >
          <PopoverTrigger
            className="relative w-full"
            onClick={(e) => {
              const targetId: string | null | undefined = (e.target as Element)
                .id;
              if (targetId && targetId === "popoverInput" && isOpen) {
                e.preventDefault();
              }
            }}
            onFocus={() => {
              setIsOpen(true);
            }}
          >
            <Input
              id="popoverInput"
              ref={inputRef}
              type="text"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              placeholder="Kategori seçiniz"
              disabled={isLoading}
              onKeyDown={(e) => {
                // Another solution is to not use PopoverTrigger
                // I have to use this workaround because Radix doesn't support disabling keyboard actions and I have input so disabling the space can't be an option
                // This works by handling the cursor automatically
                const cursorIndexStart = e.currentTarget.selectionStart!;
                const cursorIndexEnd = e.currentTarget.selectionEnd!;
                const isSelect = !(cursorIndexStart === cursorIndexEnd);
                const isSelectAll =
                  cursorIndexStart + cursorIndexEnd ===
                  e.currentTarget.value.length;
                setInputIndex(
                  isSelect && !isSelectAll
                    ? cursorIndexStart - 1
                    : cursorIndexStart,
                );
                if (e.key === " ") {
                  e.preventDefault();
                  setSearchQuery(
                    (prev) =>
                      prev.slice(0, cursorIndexStart) +
                      " " +
                      prev.slice(cursorIndexStart),
                  );
                }
              }}
            />
// ...
          </PopoverTrigger>
          
             <PopoverContent
...
            onOpenAutoFocus={(e) => {
              e.preventDefault(); 
            }}
          >


// Content Here...
         
          </PopoverContent>
          </Popover>

issues:

• Can't tab into the popover, you can tab into the input.
• Complicated. I disabled a few features and handled them myself.

I cut the example out of context I hope the code is understandable

EDIT:
I suggest you figure out a solution yourself because there are cases you wouldn't understand unless you try it out.

[johirhaquedipok]

I already worked on my personal case and have a kinda solution. I downloaded their(radixui) internal popover packages and codes from github. And I'm able to solve my specific case. At the same time I also downloaded their (radixui) hovercard codes and manipulated the code for my specific case. I found out that hover card's code is more flexible to manipulate than popover. I'm still testing those changes, once it's done. I will use it in my project.
Thanks for sharing some knowledge.

[H7ioo]

That looks better. Would be appreciated to leave the solution so other community members can benefit too.

[johirhaquedipok]

Of course. I'm still not sure of my solution. Once it serves my purpose, I'll share my code.