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