[V3.b18] Bug and fix for swipeout not functional when list-item has click event

[l2aelba]

This is a (multiple allowed):

• [x] bug

• [x] enhancement

• [ ] feature-discussion (RFC)

• Framework7 Version: Both v2.3.1 and v3.0.0-beta.6

• Framework7-Vue Version: Both v2.3.1 and v3.0.0-beta.6

• Platform and Target: Desktop browser (like Chrome / Firefox )

• Live Link or JSFiddle: https://jsfiddle.net/dx057a3e

What you did

Im using <f7-list-item> with Swipeout function and I got some bug for desktop browser version (mobile devices are ok) Example: <f7-list-item link="/about/" swipeout >

Tyr to drag this list on your desktop browser: https://jsfiddle.net/dx057a3e 👐

Expected Behavior

When dragged so click would not trigged

Actual Behavior

When dragged so click is trigged

---

Why I will this bug to be fixed since there is dekstop browser mouse triggering problem?

• Why not ?

[JCKodel]

I've implemented a fix for that in Vue and I think will help to fix this bug on the framework itself.

On my ViewModel, I have a boolean swipeIsBusy property, initially false. On the events @swipeout:open and @swipeout:close, I set this property to true. On the events @swipeout:opened and @swipeout:closed, I set this property to false. On my @click event, I ignore it if swipeIsBusy === true.

Voilá! Problem solved. Now, we just have to handle those events internally on F7 (this will fix the obvious bug above where I have only one variable to control N swipeouts... didn't test yet, but this could lead to race conditions).

Examples:

<f7-list-item swipeout v-for="schedule in schedules" :key="schedule.id" :title="schedule.created" :subtitle="schedule.statusDescription" :link="true" @swipeout:deleted="deleteSchedule(schedule.id)" @swipeout:open="swipeIsBusy = true" @swipeout:opened="swipeIsBusy = false" @swipeout:close="swipeIsBusyswi = true" @swipeout:closed="swipeIsBusy = false" @click="openSchedule(schedule)">

openSchedule(schedule)
{
    if(this.swipeIsBusy)
    {
        return;
    }

    this.$store.commit("capillarySchedule/setCurrentSchedule", schedule);
    this.$f7.router.navigate("/apps/capillarySchedule/quiz/");
},

[JCKodel]

@l2aelba, perhaps you could edit your title for [V3.b18] Bug and fix for swipeout not functional when list-item has click event (the important parts being [V3.b18] and "fix" ;-)

[l2aelba]

@JCKodel , Thanks for trick. And this is should be fixed by default.

Good job! thanks!