Monday 21 August 2023

pickatime.js opening when double/triple clicked on render event

I'm working on a project using pickatime.js and pickadate.js. I'm facing an issue where the time picker appears if I double or triple click on the element meant to only render it (not open it) but a single click doesn't replicate the error. Here's sample code which replicates the issue.

As you can see I have attempted to use stopImmediatePropagation with no luck.

This seems to be a problem with pickatime.js - how can I prevent this?

Thanks.

 $(".render-time-picker").dblclick(function(e){
        e.stopImmediatePropagation();
    });


$(".render-time-picker").click(function (e) {

        e.stopImmediatePropagation();
        returnTimePicker.render();
            
    });

    $(".return-time-picker").click(function (e) {
        e.stopPropagation();
        returnTimePicker.open();
    });

    //Start Return Time
    let $returnTimePicker = $('#return-time').pickatime({
        clear: "",
    onRender: function() {
            console.log ("Rendered!")
        },
        onStart: function() {
            this.set('select', [12, 0]); // Sets the default selected time to noon
        },
    });
    let returnTimePicker = $returnTimePicker.pickatime('picker');
    //End Return Time
<button class="render-time-picker p-6 border border-red-400">Render time picker (Double/Triple Click for Acccidental Renter / Single Click for Expected Result)</button>

<button class="return-time-picker p-6 border border-green-400">
    Set Return Time (Opens Picker)
</button>

<input type="text" name="return-time" id="return-time" class="border border-gray-200">


<link rel="stylesheet" href="https://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/default.css" id="theme_base">
<link rel="stylesheet" href="https://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/default.date.css" id="theme_date">
<link rel="stylesheet" href="https://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/default.time.css" id="theme_time">

<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.js"></script>
<script src="https://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.date.js"></script>
<script src="https://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.time.js"></script>
<script src="https://amsul.ca/pickadate.js/vendor/pickadate/lib/legacy.js"></script>


from pickatime.js opening when double/triple clicked on render event

No comments:

Post a Comment