fix(tabbar): correctly handle pointercancel

fixes #4380
fixes #4381

Author: nolimits4web

src/core/components/toolbar/tabbar-highlight.js

@@ -83,6 +83,9 @@ export const initTabbarHighlight = (el) => {
 
     if (e.type === 'pointerdown') {
       data.linkEls = el.querySelectorAll('.tab-link');
+      data.activeIndex = [...data.linkEls].findIndex((link) =>
+        link.classList.contains('tab-link-active'),
+      );
       data.rect = toolbarPaneEl.getBoundingClientRect();
       data.touched = true;
       setHighlightOnTouch(data, e);
@@ -100,6 +103,18 @@ export const initTabbarHighlight = (el) => {
       unsetHighlightOnTouch(data);
       stopAnimation(data);
     }
+    if (e.type === 'pointercancel') {
+      if (!data.touched) return;
+      data.touched = false;
+      data.moved = false;
+      data.setTransform = null;
+      stopAnimation(data);
+      if (highlightEl) {
+        highlightEl.classList.remove('tab-link-highlight-pressed');
+        highlightEl.style.transform = `translateX(${data.activeIndex * 100}%)`;
+        highlightEl.style.transitionTimingFunction = '';
+      }
+    }
   };
   el.addEventListener('touchstart', el.f7ToolbarOnPointer, { passive: false });
   el.addEventListener('pointerdown', el.f7ToolbarOnPointer, { passive: false });