Popover moving when trigger element changes width

[flazouh]

Hi guys ! I'm using your awesome package and am trying to figure out something. As you can see in this video, I have a popover that explain a word in an app i'm creating.

The trigger element is the word and the popover is opened on click in a controlled way, take a look:

Screen.Recording.2024-05-10.at.19.11.13.mov

As you can see, it looks like it's moving when the trigger width changes, because i'm displaying a bookmark button alongs with a TTS button when hovering the word in itself (because the popover is a paid feature and I want my users to still be able to listen and bookmark the word without opening the popover)

My question is, do you have any idea on how to make this not moving, which would make this imo, smoother ?

Thanks in advance, here is my code snippet:

import { autoUpdate, offset, size, useFloating } from '@floating-ui/react'
import React, { useEffect, useState } from 'react'
import { type Placement } from '@floating-ui/core'
import clsx from 'clsx'
import { VideoPlayerController } from '@common/controllers/video-player.controller'
import { flushSync } from 'react-dom'

interface CustomPopoverProps {
  className?: string
  placement?: Placement
  popupClassName?: string
  popupElement: React.JSX.Element // Allows custom Tailwind classes
  safeClose?: boolean // Allows custom Tailwind classes
  triggerElement: React.JSX.Element
  isOpen: boolean
}

export const ControlledPopover: React.FC<
  React.HTMLAttributes<HTMLDivElement> & CustomPopoverProps
> = ({
  triggerElement,
  popupElement,
  placement = 'top',
  className,
  popupClassName = 'bg-container',
  isOpen,
  ...props
}: CustomPopoverProps) => {
  const [maxHeight, setMaxHeight] = useState<number | null>(null)
  const { refs, floatingStyles, elements, update } = useFloating({
    open: isOpen,
    placement,
    middleware: [
      offset(10),
      size({
        apply({ availableHeight }) {
          flushSync(() => setMaxHeight(availableHeight))
        },
      }),
    ],
    whileElementsMounted: autoUpdate,
  })

  useEffect(() => {
    if (isOpen && elements.reference && elements.floating) {
      const cleanup = autoUpdate(
        elements.reference,
        elements.floating,
        update,
        {
          elementResize: false,
          layoutShift: false,
          ancestorResize: false,
        },
      )
      return cleanup
    }
  }, [isOpen, elements, update])

  return (
    <span {...props}>
      <span ref={refs.setReference} className={className}>
        {triggerElement}
      </span>
      {isOpen && (
        <div
          ref={refs.setFloating}
          style={{
            ...floatingStyles,
            ...(maxHeight && { maxHeight }),
            ...{ overflow: 'auto' },
          }}
          className={clsx(
            'z-50 box-border rounded-2xl shadow-2xl',
            popupClassName,
          )}
         
        >
          {popupElement}
        </div>
      )}
    </span>
  )
}

Which I call like that :

<ControlledPopover
        isOpen={isOpen}
        triggerElement={
          <LearningWordPlaceholder
            wordID={wordID}
            word={word}
          />
        }
        popupElement={
          <TranslationPopover word={word.toLowerCase()} wordID={wordID} />
        }
      />

Thanks in advance for your help ! :)

[atomiks]

elementResize: false in the autoUpdate options will prevent that, but you have a duplicate one with whileElementsMounted: autoUpdate which should be removed if you're also calling it in the effect.

[flazouh]

Thanks for the fast reply @atomiks and noticing about the duplicate 👍

This is my useEffect now:

useEffect(() => {
    if (isOpen && elements.reference && elements.floating) {
      const cleanup = autoUpdate(
        elements.reference,
        elements.floating,
        update,
        {
          elementResize: false,
        },
      )
      return cleanup
    }
  }, [isOpen, elements, update])

And here is the result:

Screen.Recording.2024-05-11.at.03.19.25.mov

Ignore the flickering which is caused by the mouseEnter getting called on the reference element that trigger the addition of the text to speech and bookmark button which makes the reference element bigger.

Any idea why this could be happening ? Thanks in advance @atomiks