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?

[benjick]

Popover has a prop called open with which you can control it being open yourself

[qiaoandrew]

Hey @benjick, thanks for the response! I tried that, but am getting some weird results. 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. Any advice?

'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>
    </>
  );
}

[martinse]

This took me a while to figure out but you can use the solution from radix-ui/primitives#2051 (comment)

Basically, change onMouseEnter and onMouseLeave to onFocus and onBlur, wrap your input in a <PopoverAnchor> element, remove the <PopoverTrigger> and provide the event handlers both for <PopoverAnchor> and <PopoverContent>.

Hope this helps!