Popover With Input Trigger

[omarkhatibco]

Hey Everyone,

I have this layout, where the user click on the input, it should trigger the popover.

it works for opening but I have 2 problems, the popover catch the focus even if autoFocus is false and then it will close because I change the state on input blur

here is my code

export const SearchForm = () => {
  const [open, setOpen] = useState(false)
  return (
    <>
      <Box position={'relative'}>
        <SearchField.Root w='full'>
          <SearchField.Input
          
            name='search'
            placeholder='Search by brand, category, value or key words...'
            onFocus={() => setOpen(true)}
            // onBlur={() => setOpen(false)}
          />
          <SearchField.Suffix>
            <Icon icon='lucide:search' />
          </SearchField.Suffix>
        </SearchField.Root>
        <Popover.Root
          open={open}
          autoFocus={false}
          closeOnEsc={false}
          closeOnInteractOutside={false}
        >
          <Popover.Anchor
            position={'absolute'}
            inset={0}
            zIndex={-1}
          />
          <Popover.Positioner>
            <Popover.Content
              w='var(--reference-width)'
              maxWidth={'none'}
            >
              <Popover.Title>Avec Drinks</Popover.Title>
              <Popover.Description>
                'FS Drinks' organic boba teas are a hit at our salon! Clients love the refreshing,
                guilt-free treat while they pamper themselves. A perfect, healthy indulgence!
              </Popover.Description>
            </Popover.Content>
          </Popover.Positioner>
        </Popover.Root>
      </Box>
    </>
  )
}

Any one have an idea, how to make the propover not capture the focus?

[j-vitali]

I also have this issue

[segunadebayo]

Hi @omarkhatibco,

It sounds like you're using an incorrect composition here. Is there any reason to use the popover in this case?

In my mind, I would use a normal div and handle the positioning logic using floating-ui. It looks like you only need the positioning logic here.

We'll consider exposing the underlying positioning implementation as components so it's easier to combine.

[omarkhatibco]

You are correct here, I ended up with a normal div.

but I think this might be a use case for the popover, I might be wrong