How could I stop item to be removed when onSwipeoutDelete event fired?

I’m using F7-React

onSwipeoutDelete = (event) => {
    showDeveloping()
    // TODO can't stop it...
    event.cancelBubble = true
    event.stopPropagation()
    return false;
  }

At the moment you can only disable it by passing swipeout.removeElements: false to app parameters to handle it manually http://framework7.io/docs/swipeout.html#swipeout-app-parameters

1 Like
const f7params = {
      id: 'io.framework7.testapp', // App bundle ID
      name: 'Framework7', // App name
      theme: 'ios', //'auto', // Automatic theme detection
      language: 'zh-CN',
      dialog: {
        // set default title for all dialog shortcuts
        title: '提示',
        // change default "OK" button text
        buttonOk: '确定',
        buttonCancel: '取消',
      },
      swipeout: {
        removeElements: false,
        removeElementsWithTimeout: true,
        removeElementsTimeout: 1000
      },
      // App routes
      routes,
    };

Why all the swipeout params not work totally, however the dialog params works fine?
Thanks very much.

"framework7": "^3.0.1",
"framework7-react": "^3.0.1",
1 Like

Would be good to see example where it doesn’t work. Just checked, all works

1 Like

Worked when I add confirmText prop
<SwipeoutButton delete confirmText={sure?}>del</SwipeoutButton>

I also tried the suggested solution and added the removeElements=false property to F7 App params but without having any effect. Now the item is removed automatically from the dom and also the Svelte handler will remove the item, which results in removing actually 2 items. How can I prevent the default delete behavior?

const f7params = {
theme: “auto”,
routes,
name: “Tueyhom Delivery”,
id: “com.seaeagletour.tueyhom.svelte”,
navbar: {
hideOnPageScroll: true,
showOnPageScrollEnd: false
},
swipeout: {
removeElements: false
}
};

“framework7”: “^5.7.2”,
“framework7-svelte”: “^5.7.2”,

I found that the item is not deleted but li.swipeout is hidden with style=“height: 0px”, and div.swipeout-content is hidden with style=“transform: translate3d(-100%, 0px, 0px);”

You can recover the item with:
$el.css({ height: ‘’ });
$el.find(’.swipeout-content’).transform(’’);

($el is li.swipeout)