Placement of popper is not working correctly

[manish1302]

Placement of popper is not working correctly

[atomiks]

PopoverTrigger needs asChild prop to render the child and place the props onto it. At the moment it's rendering the default button which wraps the input, which spans the whole page, so the popover is rendered to the right of that, but causes a collision which flips it to the bottom.

<PopoverTrigger onClick={() => setOpen((v) => !v)} asChild>
  <input />
</PopoverTrigger>

Furthermore, fallbackAxisSideDirection: 'right' is not a valid prop value, although that doesn't affect this scenario.

[manish1302]

Thank you, it is resolved.

[manish1302]

How to create overlap of field and popup border none as shown in image