Tooltip: positioned incorrectly in React 18

[robriii]

Describe the bug

Tooltips are displayed at the bottom of the page, without any content when the application is rendered using the new React 18 root API.

Reproducer

https://codesandbox.io/s/little-voice-s8ued1?file=/src/demo/TooltipDemo.tsx:7828-7838

PrimeReact version

8.2.0

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

1. Move the mouse hover buttons
2. The tooltip appears at the bottom of the page with no content

Expected behavior

Tooltip should appear where it is supposed to.

[melloware]

No you are right with React 17 it is working: https://codesandbox.io/s/primereact-test-forked-h2fpcx?file=/src/index.js

[melloware]

OK it is because of these lines creating the Tooltip component.

    if (visibleState) {
        const element = createElement();

        return <Portal element={element} appendTo={props.appendTo} visible />;
    }

    return null;

In React 18 that is somehow not properly creating the Portal and element even when the visibleState changes to true.

[agnyp]

Amazing how quickly that was fixed, yet, is there a workaround until 9.0.0 comes out?

[melloware]

I think an 8.3.0 will be coming out shortly with this fix.

[agnyp]

Great job guys!