Vue-material: MdInkRipple error in disabled watcher

[bolerodan]

Steps to reproduce

Put a :disabled attribute on md-button and toggle it on and off. When putting disabled = true, everything is fine, md-ink-ripple is removed as per the code, however, putting :disabled to false will result in an error

TypeError: Cannot read property 'parentNode' of null

Which browser?

Chrome 55

What is expected?

for md-ink-ripple to append itself back to its initial parent (in this case, md-button)

What is actually happening?

Fails to attach it self back to its parent

This may be related to #329 as well.
Looking through the code, the error is in the watcher of the disabled prop. When disabled is true, md-ink-ripple is destroyed, removed from parent. When switched to true, this.init() is executed, however at that point in time,this.$el is no longer attached to its parent, thus when calling getClosestPositionedParent() in the init() function, there is no parent on this.$el

Either in the watcher for disabled, this.$el should be reinserted into this.parentElement before calling init().

I wish I had time to setup a PR but I was able to investigate this much. Thanks again for your awesome work.

[jonataswalker]

Related #343.

[korylprince]

This was already reported in #313 and fixed in PR #317 (using pretty much your code.) It should make it into version 0.6.4.

[bolerodan]

Maybe im reading the code wrong in PR #317 but does that seem to only do a null check and not re insert the md-ink element back into its parent? If I disable the the button, the watcher for disabled calls destroy, which removes the rippleElement from its parent. If you then put disabled false, the watcher calls init, but at that point, the rippleElement no longer has a parent, thus being the reason for the error where getClosestPositionedParent was happening. But if it just returns false via this #317 PR,, init then proceeds to call destroy anyways, not re-enabling md-ink

Perhaps I am reading that PR wrong.

[marcosmoura]

I will take a deep look into it. Thanks!

[korylprince]

@marcosmoura

Currently in init, this.parentElement is always reset to this.getClosestPositionedParent(this.$el.parentNode). Perhaps this.parentElement should only be set if it is not null.

I would do a PR, but obviously my last solution didn't fully solve the problem. I want to make sure I fully understand what's going on here.

[copitz]

@korylprince Your solution solved the problem but it is neither in current master nor in 0.6.3

@marcosmoura Line 64 - 68 should be like

    const parent = element ? element.parentNode : undefined;

    if (!parent || parent.tagName.toLowerCase() === 'body') {
      return false;
    }

[jonataswalker]

My development is (kind of) stopped depending on 0.7.0 publishing. Same problem here.

[marcosmoura]

I was sick for those 13 days and I didn't have time to deal with so many issues. Sorry about that. I will fix that really soon.

[jonataswalker]

We are very grateful for your work @marcosmoura, sorry if it looked like some pressure. Indeed, there are so many issues but you a fast developer, impressive.

[marcosmoura]

No. It didn't look like that. Don't worry and stay tuned. The new version will be delivered really soon. :)

[korylprince]

I've fixed this (I think) in the above mentioned commit, if you want to pull it. I used, in part the code from @copitz. In testing, this seems to completely resolve the issue.