Enabling text selection on touch devices with drag function enabled

[robinpoort]

Hello there!

Fantastic work on the slider! 😊

Encountered issue
I've noticed a problem when the drag feature is set to true on iOS devices: text selection becomes impossible. This could be related to an event.preventDefault() being applied on the touchstart event.

Proposed solution
I'm contemplating whether it would be feasible to activate preventDefault only after the user initiates swiping (so on touchmove). This approach seems to work for vertical swipes where normal scrolling is still functional. If implemented, this would allow for a long press on the text to bring up the text selection menu on iOS. Currently, I'm unable to verify if this issue also exists on Android, as I don't have access to an Android device.

Seeking opinions
Do you think this feature enhancement would be beneficial, or is it a unique requirement for my scenario?

I'm eager to hear everyone's views on this matter.

Wishing you a wonderful day,
Robin

[robinpoort]

Hello there

If you're interested in this discussion, you're likely interested in enabling text selection for mouse events in conjunction with Splide's functionality. For that purpose, I recommend first implementing the steps from the previous discussion, which you can find here. If not, at the very least, incorporate the CSS and isTouch from that solution otherwise the fixes in this reply won't work.

To further enhance user experience, particularly on touch devices (like iOS), you can enable text selection with the following JavaScript:

// Toggle Splide's drag functionality based on text selection
document.addEventListener("selectionchange", function(e) {
    if (isTouch) {
        if (window.getSelection().toString().length <= 0) {
            // Re-enable dragging when no text is selected
            splide.Components.Drag.disable(false);
        } else {
            // Disable dragging during text selection
            splide.Components.Drag.disable(true);
        }
    }
}, false);

This script ensures that Splide's drag feature is disabled while the user is selecting text. Once the text selection is cleared (indicated by a selection length of 0), drag functionality is reinstated. This approach also re-enables dragging for mouse events. However, due to the immediate cancellation of drag on mouse down events, it shouldn't cause any issues.

Optional drag reset method
You might consider resetting the drag functionality after a selection is made, using a timeout method. However, this can lead to a somewhat inconsistent user experience. Therefore, I opted for a simpler solution, where drag is re-enabled only after the user has completed their selection. To ensure user-friendly behavior, especially during slider navigation, use this additional snippet:

// Reset drag functionality on slider movement
splide.on('moved', () => {
    // Clears the current selection and re-enables dragging
    window.getSelection().removeAllRanges();
});

This code triggers upon any movement within the carousel, effectively resetting the selection and re-enabling the drag feature as implemented above (since selectionchange is triggered). You could check for isTouch if you want but I really like the fact that text is deslected on a slide change so I'm keeping this like this :)

I hope this solution proves to be helpful for those encountering similar challenges, especially if a direct implementation hasn't been incorporated into future versions of Splide.

Best of luck with your projects!