Component resets when hidden and showed again

[allan1488]

If you apply display:none or include the component in any TAB component, everytime the tab changes and the component is hidden, when you come back to the tab that contains the component, it will be rendered again with the default values. or if you just apply display:none and then remove it.. the component will reset values as well.

I tried using < KeepAlive > to avoid this problem but nothing happened.

Also, could we do a validation to avoid the component crashing when receiving a value above the MAX value allowed? for example, I'm setting the value, the max and min dynamically, if the value comes bigger than the max, we should apply the max value.. something like: if (value > max) value=max

cheers!

[klkvsk]

Thank you @allan1488 for pointing out why I was getting slider value reset to default when my modal was closing. It seems, the component calculates slider value by leveraging getBoundingClientRect(), which will return empty rect for non-visible elements, and then it isn't calculated correctly.

Workaround that I've used: instead of toggling visibility with CSS classes, toggle it with v-if. This way the component will be destroyed before it emits a wrong value.

[Aiosa]

Quite a bug. I solved this by getting the component, and adding checks like so?

two cases that call getBoundingClientRect

      const width = o[0].target.getBoundingClientRect().width;
      // Added here check:
      if (!width) return;
      state.input1Width = width;

one case in onMounted:

      resizeObservers.ro3 = new ResizeObserver((o) => {
        // Added here check:
        if (!o[0].contentRect.width) return;
        state.width = o[0].contentRect.width - (isRange.value ? anchorWidth : 0);
      });

well, sometimes zero value could be also a valid number, in my usecase this patch fixes the behavior and it works as expected.