[BUG] Touch not work properly

[g-pane]

Describe the bug
With the last version (work fine until 5.0.6, just tested) the toggle doesn't function properly if touched, it returned to its earlier state automatically when untouched. Require some ms to "long press" to get the properly state

To Reproduce
Steps to reproduce the behavior and minimal code:

1. Click on phone (Chrome, android) on the toggle
2. For some ms go to another state and come back to the erlier state automatically

<div class="form-floating m-2">
                    <input id="me" name="me" type="checkbox" data-toggle="skip-toggle"
                           data-onlabel="ON"
                           data-offlabel="OFF"
                           data-onstyle="success" data-offstyle="danger" data-onvalue="1"
                           data-offvalue="0">

document.querySelectorAll('input[type=checkbox][data-toggle="skip-toggle"]').forEach(function (e) {
        e.bootstrapToggle();
    })

Expected behavior
Change the state

Screenshots
No

Package:

• Bootstrap 5 Toggle version: [e.g. 5.1.1]
• Bootstrap version: [e.g. 5.3.2]

Desktop:

• OS: [e.g. Windows]
• Browser: [e.g. Chrome for desktop / Chrome for Android]
• Version: [e.g. Last version]

Smartphone:
(please complete the following information)

• Device: [e.g. Xiaomi]
• OS: [e.g. Android]
• Browser: [e.g. Chrome]
• Version: [e.g. Last version]

Additional context
No

[jackie-t]

Is this project dead already? This is a serious bug, and makes the control almost unusable on mobile, which is what most people use these days.

The problem is caused because the project binds both "touchstart" and "click" and makes them both trigger the toggle, in order to handle mobile, which isn't the correct way of doing it. You either have to bind to only "pointerdown" (remove the code with touchstart and click), or add some kind of hack so that a click right after a touchstart is ignored.

Needless to say, the former is obviously the cleaner solution:

        /* // Goodbye
        this.$toggle.on("touchstart", (e) => {
            toggleActionPerformed(e, this);
        });
        this.$toggle.on("click", (e) => {
            toggleActionPerformed(e, this);
        });
         */

        // Hello
        this.$toggle.on("pointerdown", (e) => {
            toggleActionPerformed(e, this);
        });

[palcarazm]

Hi @jackie-t

I appreciate your solution.

Can you please submit a full request?

Others projects make me busy.

Thanks

[luz-arreola]

On a PC, the problem does not happen but on touch screen devices it definitely does.

FIX: edit bootstrap5-toggle.jquery.js by commenting out the following like this:

    // 9: Add listeners
//    this.$toggle.on("touchstart", (e) => {
//      toggleActionPerformed(e, this);
//    });
    this.$toggle.on("click", (e) => {
      toggleActionPerformed(e, this);
    });
//    this.$toggle.on("keypress", (e) => {
//      if (e.key == " ") {
//        toggleActionPerformed(e, this);
//      }
//    });

Be sure to include this file unless you modify the .min file. This will get you working on touch screen and on PCs just fine.

[Stefaminator]

ping! It is possible to fix this?

[jackie-t]

@palcarazm well I'd just put the change I proposed in, since that works for me on mobile and desktop. If that's fine, I created pull request #194 .

[luz-arreola]

@jackie-t I use on("click"...) on all my web applications. It works on mobile/tablets (touch screens) as well as on desktop (with a mouse).

The problem with the original source is the code that both you and I commented out. That interfered with the original on("click"...) and I assume that it would also interfere with your on("pointerdown") solution.

I've never used the "pointerdown" event since the "click" event has always worked for me on all devices. The only difference (my guess) is that the click event will not be triggered with mouse buttons other than the left mouse button. Does your solution trigger using the right mouse button?

To be very specific, the button is triggered as expected on touch screens as well as when clicking with the LEFT mouse button. If the user clicks with the RIGHT mouse button, the event is not triggered and the button does not change state.

[jackie-t]

@luz-arreola I'm not here to do a "developer-fight" of who's the smrtest. If you have a better solution simply submit a pull request.

You see palcarazm request that right above your post, why did you not do it? That's what I don't get. Over a month passed, and other users were asking for this to be fixed, so I just copied my change into a pull request because no one else (including you) did it.

If you have a better, tested solution, then please submit a pull request. That's the nice thing to do.

PS.: Since I fixed this for myself, given back my change as request, and since - like I said - I'm not here to fight over who codes the-better, I'm unsubscribing from this bug here ;) Anyone else reading do note that click and pointerdown execute at different times, for me pointerdown provides the user experience I want to provide - trigger on touch.