jtsage / jtsage-datebox

A multi-mode date and time picker for Bootstrap (3&4), jQueryMobile, Foundation, Bulma, FomanticUI, and UIKit (or others)
http://datebox.jtsage.dev/
Other
474 stars 166 forks source link

Anchor click not captured always #389

Closed sigmapi closed 7 years ago

sigmapi commented 8 years ago

Hi and thanks for the great widget!

I'm facing an issue involving the anchor/icon inside a datebox input. Sometimes clicks are not captured by the click handler that is set on _create function. This results to the window hash being reset to '#'.

Steps to reproduce: 1.Create a calbox/datebox/timebox with (useFocus=true), used in a jqm page. 2.Navigate to the page, click somewhere else first, so that the datebox input doesn't have the focus 3.Then click on the empty space at the right-bottom corner of the datebox input, inside the input border but outside of the icon. 4.The click is not captured by the handler and the window hash is reset to '#'

Perhaps it's my styling that unveiled this issue, as I can't reproduce it with your default styling in your demo pages.

I believe it has to do with the element being placed after the input element and using absolute position. If I use two inputs close to another, one calbox and one timebox, clicking on the calbox corner (as described above), triggers an anchor click on the timebox!

As a workaround I've overridden the _create method to consume the missed clicks:

    $.widget('jtsage.datebox', $.jtsage.datebox, {
         _create: function() {
             this._super();
             this.d.wrap.find('a').on('click', function(e) {
                 e.preventDefault();
                 return false;
             });
         }
     });

Hopefully you'll be able to reproduce it.

jtsage commented 7 years ago

That's odd. Great fix, but I'm somewhat hesitant to drop in in as I don't know why it works. On a page where you can reproduce this, hopefully under a browser with dev tools, can you tell me how many elements this shows?

$('#lang1').data('jtsage-datebox').d.wrap.find('a')

You'll need to update the first selector to your input element - I'm just curious if there is somehow another anchor getting dropped there. I'm leaning towards this is a style thing. If nothing else, I'll write up what you have above, and put in a FAQ section on the documentation site or something. "How to fix un-clicking clicks" or something.

sigmapi commented 7 years ago

Hi, can't reproduce the issue any longer in recent Chrome/Firefox versions. I guess it had something to do with dom event dispatching, that was fixed in the browsers.