Allow clickthrough if swipe hasn't started yet

[segersniels]

Is your feature request related to a problem? Please describe. For my use case I need a swipeable list that is also clickable, which the library doesn't support currently. I believe this could be a nice addition.

Describe the solution you'd like Allow clickthrough when the swipe threshold hasn't been hit. I would like into this myself but don't really have the time currently.

Describe alternatives you've considered None

[marekrozmus]

I don't follow :) Could you please describe in more details? How somebody could click while swiping item?

[bastiengrignon]

I've got the same issue with this SwipeableList ! Sometimes I need to click multiple times on my switch to be able to toggle it. If I don't use the SwipeableList my Switch is working fine, it toggle instantly when I click on it.

Here is a video of what's going on :

https://user-images.githubusercontent.com/41306995/147000626-6c35ba4c-f598-43a0-8a08-d6cdcd405d9e.mp4

[marekrozmus]

@bastiengrignon Could you tell me what kind of component/library are you using for this switcher? Or even better provide some code so I can see how it is built?

[bastiengrignon]

I'm using Chakra UI for the Switch component Here is a part of my code of list of alarms :

<SwipeableList fullSwipe={ true } style={ { backgroundColor: 'transparent' } } type={ ListType.IOS }>
  {
    alarms.map((alarm) => (
        <SwipeableListItem fullSwipe={ true } trailingActions={ trailingActions(alarm) } key={ uuidv4() }>
            <div
                className="flex justify-between items-center p-2 m-2 bg-sky-200 w-full rounded-xl shadow-md">
                <div>
                    <div className="flex items-center space-x-3">
                        <div className={ `text-4xl ${ textColor } space-x-1` }>
                            <span>{ alarm.hour }</span><span>:</span><span>{ alarm.minute }</span>
                        </div>
                        <div className="text-xl">
                            <SunIcon color={ alarm.lights ? 'yellow.500' : 'gray.500' }/>
                        </div>
                    </div>

                    <div className="flex items-center space-x-2 h-4">
                        <Weekdays weekdays={ alarm.weekdays }/>
                    </div>
                </div>
                <Switch size="lg" defaultChecked={ alarm.activation }
                        onChange={ (event) => updateAlarmState(alarm, event) }/>
            </div>
        </SwipeableListItem>
    ))
  }
</SwipeableList>

---

If I comment the <SwipeableListItem/>, I can toggle my switch by pressing it only once as it should 😉

[marekrozmus]

@bastiengrignon I used your code, build an app with create-react-app, added chakra and tailwind and in my case everything is working OK:

There must be some other implementation issue that I cannot reproduce from the part of your code.

[bastiengrignon]

@marekrozmus Ok you're right it was an action in the onChange of my Switch that was doing this kind of behavior. Thanks for your quick response ! 😉

[marekrozmus]

This one is closed by Release v1.5.0

[marekrozmus]

@all-contributors please add @segersniels for ideas

[allcontributors[bot]]

@marekrozmus

I've put up a pull request to add @segersniels! :tada: