https://github.com/framework7io/framework7/pull/4364

Author: huajiqaq

src/core/components/data-table/data-table-class.js

@@ -4,6 +4,11 @@ import Framework7Class from '../../shared/class.js';
 
 class DataTable extends Framework7Class {
   constructor(app, params = {}) {
+    // El
+    const $el = $(params.el);
+    // Because temporarily does not support virtual lists, so if the element does not exist, we can return directly.
+    if ($el[0].f7DataTable) return $el[0].f7DataTable;
+
     super(params, [app]);
 
     const table = this;
@@ -15,19 +20,11 @@ class DataTable extends Framework7Class {
 
     table.params = extend(defaults, params);
 
-    // El
-    const $el = $(table.params.el);
     if ($el.length === 0) return undefined;
 
     table.$el = $el;
     table.el = $el[0];
 
-    if (table.$el[0].f7DataTable) {
-      const instance = table.$el[0].f7DataTable;
-      table.destroy();
-      return instance;
-    }
-
     table.$el[0].f7DataTable = table;
 
     extend(table, {

src/core/components/form/form.js

@@ -68,6 +68,10 @@ const FormStorage = {
     const $formEl = $(formEl);
     const formId = $formEl.attr('id');
     if (!formId) return;
+    // Check using data attribute
+    if ($formEl[0]._f7FormStorageInitialized) {
+      return;
+    }
     const initialData = app.form.getFormData(formId);
     if (initialData) {
       app.form.fillFromData($formEl, initialData);
@@ -80,10 +84,12 @@ const FormStorage = {
       app.emit('formStoreData', $formEl[0], data);
     }
     $formEl.on('change submit', store);
+    $formEl[0]._f7FormStorageInitialized = true; // Set flag
   },
   destroy(formEl) {
     const $formEl = $(formEl);
     $formEl.off('change submit');
+    delete $formEl[0]._f7FormStorageInitialized; // Clear flag
   },
 };
 

src/core/components/infinite-scroll/infinite-scroll.js

@@ -42,6 +42,8 @@ const InfiniteScroll = {
       app.infiniteScroll.handle(this, e);
     }
     $el.each((element) => {
+      // skip if already initialized
+      if (element.f7InfiniteScrollHandler) return;
       element.f7InfiniteScrollHandler = scrollHandler;
       element.addEventListener('scroll', element.f7InfiniteScrollHandler);
     });

src/core/components/pull-to-refresh/pull-to-refresh-class.js

@@ -5,10 +5,12 @@ import { getDevice } from '../../shared/get-device.js';
 
 class PullToRefresh extends Framework7Class {
   constructor(app, el) {
+    const $el = $(el);
+    if ($el[0].f7PullToRefresh) return $el[0].f7PullToRefresh;
+    
     super({}, [app]);
     const ptr = this;
     const device = getDevice();
-    const $el = $(el);
     const $preloaderEl = $el.find('.ptr-preloader');
 
     ptr.$el = $el;
@@ -27,7 +29,8 @@ class PullToRefresh extends Framework7Class {
     ptr.done = function done() {
       const $transitionTarget = isMaterial ? $preloaderEl : $el;
       const onTranstionEnd = (e) => {
-        if ($(e.target).closest($preloaderEl).length) return;
+        // Material Design platform currently does not support bottom preloader animation.
+        if (!isMaterial && $(e.target).closest($preloaderEl).length) return;
         $el.removeClass('ptr-transitioning ptr-pull-up ptr-pull-down ptr-closing');
         $el.trigger('ptr:done');
         ptr.emit('local::done ptrDone', $el[0]);
@@ -204,7 +207,7 @@ class PullToRefresh extends Framework7Class {
               ((!ptr.bottom && ptrScrollableEl.scrollTop > 0) ||
                 (ptr.bottom &&
                   ptrScrollableEl.scrollTop <
-                    ptrScrollableEl.scrollHeight - ptrScrollableEl.offsetHeight))
+                  ptrScrollableEl.scrollHeight - ptrScrollableEl.offsetHeight))
             ) {
               targetIsScrollable = true;
             }
@@ -453,7 +456,7 @@ class PullToRefresh extends Framework7Class {
               ((!ptr.bottom && ptrScrollableEl.scrollTop > 0) ||
                 (ptr.bottom &&
                   ptrScrollableEl.scrollTop <
-                    ptrScrollableEl.scrollHeight - ptrScrollableEl.offsetHeight))
+                  ptrScrollableEl.scrollHeight - ptrScrollableEl.offsetHeight))
             ) {
               targetIsScrollable = true;
             }

src/core/components/swiper/swiper.js

@@ -4,6 +4,7 @@ import Swiper from 'swiper/bundle';
 import { register } from 'swiper/element/bundle';
 import $ from '../../shared/dom7.js';
 import ConstructorMethods from '../../shared/constructor-methods.js';
+import { extend } from '../../shared/utils.js';
 
 register();
 
@@ -19,8 +20,14 @@ function initSwiper(swiperEl) {
   const app = this;
   const $swiperEl = $(swiperEl);
   if ($swiperEl.length === 0) return;
-  const isElement = $swiperEl[0].swiper && $swiperEl[0].swiper.isElement;
+  if (!$swiperEl[0].swiper) return;
   if ($swiperEl[0].swiper && !$swiperEl[0].swiper.isElement) return;
+  
+  // skip if already initialized
+  if ($swiperEl[0]._f7SwiperInitialized) return;
+  $swiperEl[0]._f7SwiperInitialized = true;
+
+  const isElement = $swiperEl[0].swiper && $swiperEl[0].swiper.isElement;
   let initialSlide;
   let params = {};
   let isTabs;
@@ -113,11 +120,13 @@ export default {
   },
   create() {
     const app = this;
-    app.swiper = ConstructorMethods({
-      defaultSelector: '.swiper',
+    app.swiper = extend(ConstructorMethods({
+      defaultSelector: ".swiper",
       constructor: Swiper,
-      domProp: 'swiper',
-    });
+      domProp: "swiper"
+    }), {
+      init: initSwiper.bind(app)
+    })
   },
   on: {
     pageMounted(page) {

src/core/components/toolbar/toolbar.js

@@ -45,6 +45,9 @@ const Toolbar = {
     let highlightTranslate;
 
     if ($tabbarEl.hasClass('tabbar-scrollable') && $activeLink && $activeLink[0]) {
+      if ($activeLink[0].offsetWidth == 0) {
+        console.warn("ToolBar: ToolBar's scrollable indicator width is 0 because the first active tab width measured as 0.");
+      };
       highlightWidth = `${$activeLink[0].offsetWidth}px`;
       highlightTranslate = `${$activeLink[0].offsetLeft}px`;
     } else {

src/react/components/chip.jsx

@@ -45,7 +45,6 @@ const Chip = (props) => {
   };
 
   const onDeleteClick = (event) => {
-    event.stopPropagation();
     emit(props, 'delete', event);
   };
 

src/react/components/page-content.jsx

@@ -104,9 +104,15 @@ const PageContent = (props) => {
         f7.on('ptrPullEnd', onPtrPullEnd);
         f7.on('ptrRefresh', onPtrRefresh);
         f7.on('ptrDone', onPtrDone);
+        // PTR only initializes in pageInit callback.
+        // If page-content is added after page initialization, check if PTR exists.
+        // If not, create it manually.
+        f7.ptr.create(elRef.current);
       }
       if (infinite) {
         f7.on('infinite', onInfinite);
+        // Same logic applies to infinite scroll
+        f7.infiniteScroll.create(elRef.current);
       }
     });
   };

src/react/components/tabs.jsx

@@ -3,6 +3,7 @@ import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effec
 import { classNames, getExtraAttrs } from '../shared/utils.js';
 import { colorClasses } from '../shared/mixins.js';
 import { TabsSwipeableContext } from '../shared/tabs-swipeable-context.js';
+import { f7ready, f7 } from '../shared/f7.js';
 import { setRef } from '../shared/set-ref.js';
 /* dts-imports
 import { SwiperOptions } from 'swiper';
@@ -28,6 +29,13 @@ const Tabs = (props) => {
   const elRef = useRef(null);
 
   useIsomorphicLayoutEffect(() => {
+    if (swipeable) {
+      f7ready(() => {
+        // It only initializes in pageInit callback
+        // We may need to manually call init() to update the instance
+        f7.swiper.init(elRef.current)
+      });
+    }
     if (!swipeable || !swiperParams) return;
     if (!elRef.current) return;
     Object.assign(elRef.current, swiperParams);

src/svelte/components/chip.svelte

@@ -44,7 +44,6 @@
   const icon = $derived(useIcon(restProps));
 
   function onDeleteClick(e) {
-    e.stopPropagation();
     restProps.onDelete?.(e);
     restProps.ondelete?.(e);
   }