[BUG] Anchor element doesn't open tooltip until re-render

[DenisLantero]

Bug description
Sometimes the anchor elements don't open the tooltip, until they get rerendered.
This is the code for my anchor elements:

import React from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import styles from '@contact_center/assets/stylesheets/contact_center/components/new_tickets_kanban_board/ticket/ticket_edit_action.module.scss'

const TicketEditAction = ({
  isHovering,
  ticket,
}) => {
  const cssClasses = classNames(
    styles['ticket__edit-action'],
    {
      [styles['ticket__edit-action--hover']]: isHovering,
    }
  )

  return (
    <div className={cssClasses}>
      <a
        className="btn ticket__edit-action-anchor"
        data-ticket-id={ticket.id}
      >
        <FontAwesomeIcon icon="ellipsis-vertical" />
      </a>
    </div>
  )
}

TicketEditAction.propTypes = {
  isHovering: PropTypes.bool.isRequired,
  ticket: PropTypes.object.isRequired,
}

export default TicketEditAction

And this is my code for the tooltip itself:

import React, { useState, useMemo, useCallback, useRef, useEffect } from 'react'
import styles from '@contact_center/assets/stylesheets/contact_center/components/new_tickets_kanban_board/ticket/ticket_edit_action.module.scss'

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

import 'react-tooltip/dist/react-tooltip.css'
import { Tooltip } from 'react-tooltip'

import { useSelector } from 'react-redux'
import { markActivitiesAsResolved, moveTicketOnTop } from '@contact_center/new_tickets_kanban_board/api/tickets'

function ActionsTooltip () {
  const [isOpen, setIsOpen] = useState(false)
  const [ticketId, setTicketId] = useState('')

  const activeAnchorRef = useRef(null)

  const {
    moveOnTopTicketUrl,
    massiveActivitiesResolveTicketUrl,
    editTicketUrl,
  } = useSelector(state => ({
    moveOnTopTicketUrl: state.base.urls.moveOnTopTicket,
    massiveActivitiesResolveTicketUrl: state.base.urls.massiveActivitiesResolveTicket,
    editTicketUrl: state.base.urls.editTicket,
  }))

  const editTicketHref = useMemo(() => editTicketUrl?.replace(':id', ticketId), [editTicketUrl, ticketId])
  const massiveActivitiesResolveTicketHref = useMemo(() => massiveActivitiesResolveTicketUrl?.replace(':id', ticketId), [massiveActivitiesResolveTicketUrl, ticketId])
  const moveOnTopTicketHref = useMemo(() => moveOnTopTicketUrl?.replace(':id', ticketId), [moveOnTopTicketUrl, ticketId])

  const onEdit = useCallback((event) => {
    event.preventDefault()
    window.open(editTicketHref, '_blank')
  }, [editTicketHref])

  const onResolveActivities = useCallback((event) => {
    event.preventDefault()
    markActivitiesAsResolved(massiveActivitiesResolveTicketHref)
  }, [massiveActivitiesResolveTicketHref])

  const onMoveOnTop = useCallback((event) => {
    event.preventDefault()
    moveTicketOnTop(moveOnTopTicketHref)
  }, [moveOnTopTicketHref])

  useEffect(() => {
    const dataTicketId = activeAnchorRef?.current?.getAttribute('data-ticket-id')
    if (dataTicketId) setTicketId(dataTicketId)
  }, [activeAnchorRef])

  return (
    <Tooltip
      className={styles['actions-tooltip']}
      id="ticket-edit-action-tooltip"
      anchorSelect=".ticket__edit-action-anchor"
      place="bottom-start"
      openOnClick={true}
      arrowColor="#ededed"
      isOpen={isOpen}
      setIsOpen={setIsOpen}
      clickable
      opacity={1}
      render={({ _, activeAnchor }) => {
        activeAnchorRef.current = activeAnchor

        return (
          <>
            <div
              className={styles['action-container']}
              onClick={(event) => {
                event.preventDefault()
                setIsOpen(false)
                onEdit(event)
              }}
            >
              <FontAwesomeIcon
                icon="pencil"
                className={styles['icon-margin-right']}
              />
              {I18n.t('frontend.contact_center.ticket.actions.edit')}
            </div>
            <div
              className={styles['action-container']}
              onClick={(event) => {
                event.preventDefault()
                setIsOpen(false)
                onResolveActivities(event)
              }}
            >
              <FontAwesomeIcon
                icon="check-double"
                className={styles['icon-margin-right']}
              />
              {I18n.t('frontend.contact_center.ticket.actions.resolve_activities')}
            </div>
            <div
              className={styles['action-container']}
              onClick={(event) => {
                event.preventDefault()
                setIsOpen(false)
                onMoveOnTop(event)
              }}
            >
              <FontAwesomeIcon
                icon="arrows-up-to-line"
                className={styles['icon-margin-right']}
              />
              {I18n.t('frontend.contact_center.ticket.actions.move_to_top')}
            </div>
          </>
        )
      }
    }
    />
  )
}

export default ActionsTooltip

Here's a video demonstrating the issue:
https://github.com/ReactTooltip/react-tooltip/assets/83024157/e89d6ff2-89ab-41c3-9c67-f39cec674870

Version of Package
v5.26.4

To Reproduce
I am not sure how you can reproduce this issue since I don't even know what's the cause of this problem

Expected behavior
The tooltip should open every time an element that respects the anchorSelect prop is clicked, regardless of the timing of its render

Desktop (please complete the following information if possible or delete this section):

• OS: Windows 11
• Browser: Chrome, Version 124.0.6367.119
• React Tooltip Version: v5.26.4
• Frameworks: React 18.2.0

Additional context
The element that you see in the video is a Drag And Drop Kanban Board with virtualized columns. Initially, I thought the problem had something to do with the virtualization of the component that contains the tooltip anchor, but the tooltips anchor work fine on elements that are not in the first render of the Kanban Board, I believe it probably has something to do with the first render of the page, but I'm not sure.
Am I doing something wrong or is there a problem with the library? Please let me know :)

[gabrieljablonski]

Could you do a quick test if it works with using data-tooltip-id="ticket-edit-action-tooltip" (and keeping the id prop on the tooltip), instead of using anchorSelect? Probably won't fix it, but just to make sure.

Also, I'm not sure this effect works as you expect.

  useEffect(() => {
    const dataTicketId = activeAnchorRef?.current?.getAttribute('data-ticket-id')
    if (dataTicketId) setTicketId(dataTicketId)
  }, [activeAnchorRef])

Refs created with useRef() never change between renders, so this effect will only run once per mount/unmount cycle. I'd recommend modifying the onEdit, onResolveActivities, and onMoveOnTop callbacks to receive the id directly, which you'll get from the activeAnchor directly.

---

Please also try downgrading to v5.26.0. Some users reported some issues that we haven't been able to reproduce, and that downgrading worked for them. Let us know when you try.

[DenisLantero]

I got the same issue when using data-tooltip-id="ticket-edit-action-tooltip" instead of anchorSelect.

As for the useEffect, you're right, I noticed it yesterday after I opened the issue.
Now I keep the ticketId state in a context, and whenever I click on TicketEditAction I update it accordingly, thanks for pointing it out though.

Downgrading to v5.26.0. also seems to fix the issue for some reason, now the tooltip works just fine, thanks!

[gabrieljablonski]

Downgrading to v5.26.0. also seems to fix the issue for some reason, now the tooltip works just fine, thanks!

That's good news for you, but bad news for us 😅. No idea why the more recent versions seemingly broke the tooltip.

If it's not too much to ask, do you mind testing, v5.26.1, v5.26.2, and v5.26.3 as well to help us narrow it down?

From another issue that was opened, I think it was v5.26.1 that broke something, but I'd appreciate it if you could confirm it.

[Gertjan1996]

@gabrieljablonski any updates on this issue? I encounter the same issue on version 5.26.3, sometimes the tooltip works as expected, sometimes I have to rerender before tooltip works, just like the issue @DenisLantero mentioned and showcased in the video.

In the meantime, I'll try downgrading to 5.26.0

[github-actions]

This issue is stale because it has not seen activity in 30 days. Remove the stale label or comment within 14 days, or it will be closed.

[github-actions]

This issue is stale because it has not seen activity in 30 days. Remove the stale label or comment within 14 days, or it will be closed.

[github-actions]

This issue is stale because it has not seen activity in 30 days. Remove the stale label or comment within 14 days, or it will be closed.