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

Destroy chart in setTimeout() - Uncaught TypeError #5427

Closed
kpau opened this Issue Jun 23, 2016 · 4 comments

Comments

Projects
None yet
4 participants
@kpau

kpau commented Jun 23, 2016

Expected behaviour

Create a chart with custom menu item in the context (hamburger) menu.
The item's click handler calls setTimeout(), which calls chart.destroy() after 0ms.
Should destroy the chart without any errors.

Actual behaviour

Destroys the chart, but throws an error in the console:

Uncaught TypeError: button.setState is not a function
    hide @ exporting.src.js:546

After debugging, I saw that hide() is called two times - both on click and mouseleave, but the second call is after 500ms. The hide() function hides the menu and changes the button state.
After 500ms there is no chart, but there is button reference, which don't have any real DOM element attached to it.

Live demo with steps to reproduce

http://jsfiddle.net/26ow3z8x/3/
Click the context menu, and then 'Async destroy'. Check the console logs.
In our particular case, we destroy the chart, and then create a new one with new configurations.
Since we are creating new chart, this error doesn't effect the functionality and behavior, but we would like to keep errors thrown in the console as little as possible.

Affected browser(s)

Google Chrome, Version 51.0.2704.84 m
Haven't tested on other browsers.

@pawelfus

This comment has been minimized.

Show comment
Hide comment
@pawelfus

pawelfus Jun 23, 2016

Contributor

Hi,

Thank you for reporting. Unfortunately, for me it works fine (OSX + Chrome Version 51.0.2704.103 (64-bit)), take a look:

destroy

Contributor

pawelfus commented Jun 23, 2016

Hi,

Thank you for reporting. Unfortunately, for me it works fine (OSX + Chrome Version 51.0.2704.103 (64-bit)), take a look:

destroy

@kpau

This comment has been minimized.

Show comment
Hide comment
@kpau

kpau Jun 23, 2016

Tested on different environments:

  • Windows 7 (64-bit), Google Chrome 51.0.2704.103 m (32-bit): error is visible.
  • Windows 8.1 (64-bit), Google Chrome 51.0.2704.84 m (32-bit): error is visible.
  • Windows 8.1 (64-bit), Google Chrome 51.0.2704.103 m (64-bit): error is visible.
  • OSX, Google Chrome 51.0.2704.103 m (64-bit): error is not visible (as in your case).

It seems that error is visible on Windows OS, but not on OSX.

kpau commented Jun 23, 2016

Tested on different environments:

  • Windows 7 (64-bit), Google Chrome 51.0.2704.103 m (32-bit): error is visible.
  • Windows 8.1 (64-bit), Google Chrome 51.0.2704.84 m (32-bit): error is visible.
  • Windows 8.1 (64-bit), Google Chrome 51.0.2704.103 m (64-bit): error is visible.
  • OSX, Google Chrome 51.0.2704.103 m (64-bit): error is not visible (as in your case).

It seems that error is visible on Windows OS, but not on OSX.

@KacperMadej

This comment has been minimized.

Show comment
Hide comment
@KacperMadej

KacperMadej Jun 23, 2016

Contributor

Tested on Windows 7 / Chrome. mouseleave event fires hide after 500 milliseconds, when chart is already destroyed. if (button) returns true, because the button is, at the time, an empty SVGElement object. Relevant code lines in exporting.src.js (543-554):

        // hide on mouse out
        hide = function () {
            css(menu, { display: NONE });
            if (button) {
                button.setState(0);
            }
            chart.openMenu = false;
        };

        // Hide the menu some time after mouse leave (#1357)
        addEvent(menu, 'mouseleave', function () {
            hideTimer = setTimeout(hide, 500);
        });
Contributor

KacperMadej commented Jun 23, 2016

Tested on Windows 7 / Chrome. mouseleave event fires hide after 500 milliseconds, when chart is already destroyed. if (button) returns true, because the button is, at the time, an empty SVGElement object. Relevant code lines in exporting.src.js (543-554):

        // hide on mouse out
        hide = function () {
            css(menu, { display: NONE });
            if (button) {
                button.setState(0);
            }
            chart.openMenu = false;
        };

        // Hide the menu some time after mouse leave (#1357)
        addEvent(menu, 'mouseleave', function () {
            hideTimer = setTimeout(hide, 500);
        });

@pawelfus pawelfus added the Bug label Jun 23, 2016

@dorilla

This comment has been minimized.

Show comment
Hide comment
@dorilla

dorilla Oct 10, 2016

something like this worked for me:

image

would love a fix for this ASAP

dorilla commented Oct 10, 2016

something like this worked for me:

image

would love a fix for this ASAP

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment