Setting a custom anchorRef on popovers

[cloud-walker]

Hi all, I have the following situation:

import * as A from '@ariakit/react'
import React from 'react'

const MyInput = React.forwardRef(function CustomInput(
  {
    wrapperRef,
    ...props
  }: React.HTMLAttributes<HTMLInputElement> & {
    wrapperRef?: React.Ref<HTMLDivElement>
  },
  ref: React.Ref<HTMLInputElement>,
) {
// this is the anchor that the popover needs, as the input is more inside the div, potentially with padding and stuff 
  return (
    <div ref={wrapperRef}> 
      <input {...props} ref={ref} type="text" />
    </div>
  )
})

export function MyCombobox() {
  const anchorRef = React.useRef<HTMLDivElement>(null) // is there a way to pass this ref to the popover?

  return (
    <A.ComboboxProvider>
      <A.Combobox render={<MyInput wrapperRef={anchorRef} />} />

      <A.ComboboxPopover>
        <A.ComboboxItem value="1">One</A.ComboboxItem>
        <A.ComboboxItem value="2">Two</A.ComboboxItem>
        <A.ComboboxItem value="3">Three</A.ComboboxItem>
      </A.ComboboxPopover>
    </A.ComboboxProvider>
  )
}

Is there an (possibly ergonomic / official) way to pass the anchorRef to the popover?

I've found that there is a .setAnchorElement() method, but it seems to be overwritten during the render cycle.

Please consider that the example is a simplified example, in my real use case I've a UI library, with the Combobox splitted in multiple components.

[diegohaz]

You can use the getAnchorRect prop and return anchorRef.current.getBoundingClientRect() from it.

[cloud-walker]

I @diegohaz, thanks for taking the time to respond! Unfortunately this does not apply to my use case (it applies to the users of my UI library tho).

As I briefly sad in my original question, my UI library is a compound components library, that uses ariakit under the hood but still exports component fragments.

Here a more real example:

import * as A from '@ariakit/react'
import React from 'react'

// From another module
const MyInput = React.forwardRef(function CustomInput(
  {
    wrapperRef,
    ...props
  }: React.HTMLAttributes<HTMLInputElement> & {
    wrapperRef?: React.Ref<HTMLDivElement>
  },
  ref: React.Ref<HTMLInputElement>,
) {
  // this is the anchor that the popover needs, as the input is more inside the div, potentially with padding and stuff
  return (
    <div ref={wrapperRef}>
      <input {...props} ref={ref} type="text" />
    </div>
  )
})

export const ComboboxSearch = React.forwardRef(function ComboboxSearch(props) {
  const anchorRef = React.useRef<HTMLDivElement>(null)
  return <A.Combobox {...props} render={<MyInput wrapperRef={anchorRef} />} /> // we want to pass the anchorRef to the combobox context, to overwrite the default used for getBoundingClientRect()
})

export const ComboboxPopover = React.forwardRef(
  function ComboboxPopover(props) {
    return (
      <A.ComboboxPopover {...props} gutter={4} className="my-popover-style" />
    )
  },
)

P.S. the wrapperRef thing is under my control, I invented it, so I can change that if there is a more smart way to encapsulate the anchorRef problem.

[diegohaz]

I'm assuming you also export some kind of wrapper (like ComboboxProvider or useComboboxStore). Couldn't you keep the anchor element in a state in that component so ComboboxSearch can set it and ComboboxPopover can read it?

[cloud-walker]

yes I wrap the entire Combobox tree around the Ariakit.ComboboxProvider, so there is now way other than a custom context to pass around the anchorElement?

[diegohaz]

For now, yes. In the future, you'll be able to use ComboboxAnchor separately from Combobox.