ulaval/modul-components

MSpinner does not remove backdrop on destruction

Opened this issue · 0 comments

@ulaval/modul-components

Issue Checklist

  • [x ] Provide a description of the issue
    Le backdrop n'est pas détruit lorsqu'on utilise un m-spinner (en mode processing) dans un component dont le rendu est conditionnel et que le component se fait détruire.

If submitting a bug

  • [x ] Provide a step by step way to reproduce the problem with screenshot or video

parent.html

<div v-if="shouldRenderChild">
    <child></child>
</div>

parent.ts

...
get shouldRenderChild() {
    return this.$store.state.shouldRenderChild;
}
...

child.html

<div>
   <m-spinner v-if="shouldRenderSpinner" :processing="true"></m-spinner>
   <button v-on:click="onClick"></button>
</div>

child.ts

shouldRenderSpinner = false;

onClick() {
    this.shouldRenderSpinner = true;

    setTimeout(() => {
        this.$store.commit('HIDE_CHILD');
    }, 1000)
}

mutations.ts

const mutations = {
    HIDE_CHILD: (state) {
        state.shouldRenderChild = false;
    }
}
  • [x ] Provide the expected behaviour

Le backdrop devrait disparaitre lorsque le component se fait détruire. On peut régler le problème de la manière suivante:

spinner.js

MSpinner.prototype.beforeDestroy = function () {
    if (this.processing) {
      + this.removeBackdrop();
        var el = document.getElementById(this.spinnerId);
        if (el) {
            document.body.removeChild(el);
        }
    }
};
  • [x ] I'm not an internal contributor