How can I make make a popover be triggered by an input?

[qiaoandrew]

I want the popover content to be visible when the input is focused, and make the content hidden when the input is blurred. How could I do this?

[qiaoandrew]

When I focus on the input, it seems like the state change is re-rendering the entire component, causing it the blur instantly. This is my code. I am using the basic shadcn Input and Popover here, which is a wrapper with some additional styling on top of Radix UI.

'use client';

import { useState } from 'react';
import { useSearchParams, usePathname, useRouter } from 'next/navigation';
import { useDebouncedCallback } from 'use-debounce';
import { SearchIcon } from 'lucide-react';

import FiltersButton from '@/components/buttons/FiltersButton';
import GradientText from '@/components/ui/GradientText';
import { Input } from '@/components/ui/Input';
import {
  Popover,
  PopoverAnchor,
  PopoverContent,
} from '@/components/ui/Popover';

export default function CompareSaleListings() {
  const [isOpen, setIsOpen] = useState(false);

  const searchParams = useSearchParams();
  const pathname = usePathname();
  const { replace } = useRouter();

  const handleSearch = useDebouncedCallback((query: string) => {
    const params = new URLSearchParams(searchParams);
    if (query) {
      params.set('query', query);
    } else {
      params.delete('query');
    }
    replace(`${pathname}?${params.toString()}`);
  }, 300);

  return (
    <>
      <div className="container-xl mb-9 xl:mb-12">
        <h1 className="mb-3 font-display text-8 font-[750] xl:mb-4 xl:text-10">
          <GradientText>Compare Listings</GradientText>
        </h1>

        <Popover open={isOpen}>
          <PopoverAnchor asChild>
            <div className="flex w-full max-w-[760px] gap-x-2">
              <div className="relative grow p-px">
                <SearchIcon
                  size={18}
                  className="absolute left-3.5 top-1/2 -translate-y-1/2 text-muted-foreground"
                />
                <Input
                  placeholder="Search by address, city, zip..."
                  className="rounded-2.5 pl-[40px] text-4"
                  onChange={(e) => handleSearch(e.target.value)}
                  onFocus={() => setIsOpen(true)}
                  onBlur={() => setIsOpen(false)}
                  defaultValue={searchParams.get('query')?.toString()}
                />
              </div>
              <FiltersButton />
            </div>
          </PopoverAnchor>
          <PopoverContent>Test</PopoverContent>
        </Popover>
      </div>
    </>
  );
}```

[benoitgrelard]

This is because Popover.Trigger is intended to be a button which opens the popover. The popover then receives focus which is why it would cause your issue.

Popover likely isn't suited to build what you are trying to build.

What are you trying to achieve?

[qiaoandrew]

Hey Benoit! Thanks so much for the response.

I'm trying to have a Popover be triggered by the onFocus of an input. Then, for onBlur, I want the Popover to be hidden. This is for a search recommendations feature. I have attached a screenshot at the bottom if that helps.

Thanks again for the help!

[benoitgrelard]

This is more of a combobox, Radix primitives doesn't currently have one, but you can find it in in other libs.
Trying to shove Popover into it will create all sorts of problems because it is the wrong pattern.

[qiaoandrew]

Got it, thanks so much Benoit! Really appreciate what you and your team is doing at WorkOS!

[mlazuardy]

in newer version of popover, you can use use onOpenAutoFocus={(e) => e.preventDefault()} on Popover.Content to prevent input blurred by the popover content autofocus

[amechain-dtml]

Hello
how did you make the input still typable when the popover is open? --> When connecting the popover with the input component (see code), i cannot type anything anymore in it.
Also my popover component is not visible right below the trigger (here, the input field) like it would normally be with a button trigger.

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setInputValue(e.target.value);
    };

<div>
    <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
        <Input name="search" placeholder="Find a customer..." onFocus={() => setIsPopoverOpen(true)} onClick={() =>         setIsPopoverOpen(true)} onChange={handleInputChange} value={inputValue}/>
        <Popover.Content >
            <h4>Title</h4>
            <p>This is the content of the popover.</p>
        </Popover.Content>
    </Popover>
</div>

[mlazuardy]

You need to wrapped the input component with PopoverTrigger and set “asChild” props to true / or just pass it @amechain-dtml

[amechain-dtml]

thank you very much for your answer.
when i do so, i still cannot type and my placeholder "Find a customer..." disappear and it seems like input loses focus... do you know why?

<Popover open={isPopoverOpen}>
           <Popover.Trigger asChild>
           <Input name="search" placeholder="Find a customer..." onFocus={() => setIsPopoverOpen(true)} onClick={() => setIsPopoverOpen(true)} onBlur={() => setIsPopoverOpen(false)}/>
           </Popover.Trigger>
               <Popover.Content>
                   <h4>Title</h4>
                   <p>This is the content of the popover.</p>
               </Popover.Content>
           </Popover>

[mlazuardy]

@amechain-dtml beside removing the onclick and onfocus on your input component. You might need to add onOpenAutoFocus on PopoverContent. It described on my comment earlier.

in newer version of popover, you can use onOpenAutoFocus={(e) => e.preventDefault()} on Popover.Content to prevent input blurred by the popover content autofocus

[amechain-dtml]

is it because the Trigger is getting on top of the Input and hiding its content?

[amechain-dtml]

@mlazuardy thank you very much for your help