Using Native Popovers with React Aria

[mmorris8]

I struggled with this for two weeks and went down a lot of blind alleys and false turns. Posting to try to save someone else my pain, and hopefully a version of this can make its way into the documentation of the framework.

The Native Popover API entered Baseline in December though there's a small bug in Safari iOS that isn't relevant to this implementation as we have to disable the automatic dismiss feature when working with nested Popovers.

The Native Popover API places objects on a special top layer, making the z-index irrelevant. It also offers finer control of the animation of the popover's entrance and exit in CSS alone.

Here's the code, parred down.

/*
 * The React Aria positioning of the popover will not work with the native popover. This function
 * performs the positioning of the native popover.
 */
function popoverToggle(isOpen, popover, parentElement) {
  if (isOpen) {
    const bounds = parentElement.getBoundingClientRect()

    if (bounds.top > window.innerHeight / 2) {
      popover.style.top = `32px`
      popover.style.bottom = 'auto'
      popover.style.height = `${ Math.floor(bounds.top - 32)}px`
      popover.classList.add('above')
    } else {
      popover.style.top = 'auto'
      popover.style.bottom = `32px`
      popover.style.height = `${ Math.floor(window.innerHeight - bounds.bottom - 32) }px`
      popover.classList.remove('above')
    }

    popover.style.left = `${bounds.left}px`
    popover.style.width = `${bounds.width}px`
    popover.showPopover()
    
  } else {
    popover.hidePopover() 
  }
}
function ComboBoxNativePopover {
  const popoverRef = useRef()
  const wrapRef = useRef()

  return (
    <ComboBox
      onOpenChange={(isOpen) => {
        setTimeout(() => popoverToggle(isOpen, popoverRef.current, wrapRef.current))
      }}    
    >
      <Label>{label}</Label>
      <div ref={wrapRef}>
        <Input />
        <Button />
      </div>
      <Popover>
        <div popover="manual" ref={popoverRef} anchor={parentPopover} className="menu-popover">
          <div> 
            <ListBox 
              items={items} 
              selectionMode="single" 
            >
              {item => <ListBoxItem id={item.label}>{
                optionLabels ? optionLabels[item.label] : item.label
              }</ListBoxItem>}
            </ListBox>
          </div>
        </div>
      </Popover>
    </ComboBox>
 )
}

This is a draft based on my working code. When I have time and if there is interest I'll set up a code sandbox with the above and the attendant CSS.

The solution, in short, is to nest the native popover inside the React Aria one, then show it after the React Aria popover renders. As far as React Aria is concerned the two divs that make up the native popover are just normal dom elements without special properties.

The tricky part is a popover that launches a popover. In this case the nested popover needs to know the Id of the parent, whether or not it was launched by React Aria, and it will hold the Id in its anchor attribute.

The double nesting I do above is due to how I animated the entrance of the popover - it isn't necessary in a different implementation. The popover mode has to be set to manual when the popover is nested, otherwise the parent will be dismissed because their contents are within different React Portals.