Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tooltips appear with old contents after being undefined #972

Closed
efc opened this issue Jul 26, 2019 · 2 comments

Comments

@efc
Copy link

commented Jul 26, 2019

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

This comment has been minimized.

Copy link
Author

commented Jul 26, 2019

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 mertsincan self-assigned this Aug 28, 2019

@mertsincan mertsincan added the defect label Aug 28, 2019

@mertsincan mertsincan added this to the 3.1.9 milestone Aug 28, 2019

mertsincan added a commit that referenced this issue Aug 28, 2019
@mertsincan

This comment has been minimized.

Copy link
Member

commented Aug 28, 2019

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

Best Regards,

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.