Tooltips appear with old contents after being undefined

[efc]

I'm submitting a ...

[X] bug report

Codesandbox Case (Bug Reports)
Please fork the codesandbox below and create a case demonstrating your bug report. Issues without a codesandbox have much less possibility to be reviewed.

https://codesandbox.io/s/primereact-tooltipbug-iyjrr

Current behavior

Once a tooltip is defined for a component, it cannot be undefined. In other words, you cannot make tooltips go away.

Note, the same odd behavior is exhibited for both undefined and '' values of tooltips. In either case, the tooltip will still appear with the previous value used for the contents.

Expected behavior

If I define a tooltip as undefined or '' on a component, then it should not appear at all. Tooltips should never appear with old contents values.

Minimal reproduction of the problem with instructions

See my code sandbox link above for an example.

Say that I have a state property called showHelp on my component that controls when help is displayed. Then I define a button in this components render like this:

<Button label="Tooltip Test" tooltip={this.state.showHelp ? "Help is on" : undefined} />

If I later render this component with the state of showHelp as false, the tooltip will still be displayed.

However, if my button had been defined like this, then the tooltip would toggle as expected:

<Button label="Tooltip Test" tooltip={this.state.showHelp ? "Help is on" : "Help is off"} />

So once tooltips exist, they can be changed, but they cannot be removed. This would seem to be a bug in whatever listener mechanism is driving the tooltips. If the tooltip property is undefined, then any existing listeners for that tooltip need to be removed.

Please tell us about your environment:

• macOS, VS Code

• React version: 16.8.0+

• PrimeReact version: 3.1.7

• Browser: all

• Language: all

[efc]

After looking at the code, my guess is that this is due to Button.js (and other similar tooltip-using components) not properly destroying tooltips when the value changes. For example, in Button.js I'm guessing this might help:

    componentDidUpdate(prevProps) {
        if (this.props.tooltip && prevProps.tooltip !== this.props.tooltip) {
            if (this.tooltip)
                this.tooltip.updateContent(this.props.tooltip);
            else
                this.renderTooltip();
        } else if (prevProps.tooltip) {
                this.tooltip.destroy();
                this.tooltip = null;
        }
    }

Right now that else if clause is missing.

Remember, a fix like this is needed in every component that supports tooltips.

[mertsincan]

Thanks a lot for the suggestions! Fixed now for all components.

Best Regards,