Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

replace onmousedown with onmouseup #249

Closed
forwardever opened this issue Jan 31, 2015 · 12 comments
Closed

replace onmousedown with onmouseup #249

forwardever opened this issue Jan 31, 2015 · 12 comments

Comments

@forwardever
Copy link

is there a chance to replace onmousedown with onmouseup events?

problem: when clicking on a day in chrome browser, and holding the mouse button a bit longer than normal, while moving the mouse only slightly, the whole page gets "selected" (that means highlighted, starting from the position of the datepicker to the end of page)

also, the event should not fire when draggin the mouse outside the target's region (the day selected on mousedown)
@forwardever
Copy link
Author

suggestion:
forwardever@cf2f159

e.g. the datepickers of the bigger booking portals like expedia.com and booking.com have similar behaviour

@rikkert
Copy link
Member

rikkert commented Feb 2, 2015

As soon as I click the whole popup is gone I can't drag and select anything.

@forwardever
Copy link
Author

@rikkert
if I get you right, you cannot reproduce the behaviour described above?

I faced the problems just on Chrome (Windows), the problem does not appear on Firefox or Internet Explorer.

Furthermore, the problem occurs when using a div (with the trigger option), not when using an input field.

@forwardever
Copy link
Author

screenshot

1

it seems that the problem occurs when you click on a date (mousedown -> the datepicker disappears) and then you release the mouse button (mouseup), while the position of the mouse button has changed slightly

I have created a very simple example (screenshot), on more complex pages in production, the whole page gets highlighted with blue color

@forwardever
Copy link
Author 

<html>
  <head>
    <script type="text/JavaScript" src="pikaday.js"></script>
    <link href="pikaday.css" rel="stylesheet" type="text/css" />
  </head>
  <body>

    <input type="text" id="datepicker">
    <div id="test">HELLO</div>

    <script src="pikaday.js"></script>
    <script>
        var picker = new Pikaday({ field: document.getElementById('datepicker'), trigger: document.getElementById('test') });
    </script>

    <div>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    </div>

  </body>
</html>

@forwardever
Copy link
Author

another screenshot with code (datepicker in larger div)

2

<html>
  <head>
    <script type="text/JavaScript" src="pikaday.js"></script>
    <link href="pikaday.css" rel="stylesheet" type="text/css" />
  </head>
  <body>


    <div>

      <input type="text" id="datepicker">
      <div id="test">HELLO</div>

      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>
    </div>

    <script src="pikaday.js"></script>
    <script>
        var picker = new Pikaday({ field: document.getElementById('datepicker'), trigger: document.getElementById('test') });
    </script>

  </body>
</html>

@Tom303
Copy link

Tom303 commented Feb 4, 2015

I also found this to be an issue, but as a dirty fix (workaround) i just increased the time on line 490 (https://github.com/dbushell/Pikaday/blob/master/pikaday.js#L490) from 50 to 100. This adds a slight delay between the events and seems to keep chrome happy.

@rikkert
Copy link
Member

rikkert commented Feb 5, 2015

To me this seems default browser behavior.
When I click and start dragging, the picker closes and then I start selecting text.
This is not strange right?

@forwardever
Copy link
Author

@rikkert it is an annoying user experience, as selecting text is NOT intended, but happens nonetheless

"start dragging, the picker closes and then I start selecting text" in this case seems to be a question of milliseconds

not sure why nobody has complained so far, seems like the issue is limited to chrome on windows, which in my case are 20% of users

or is it just a broken mouse playing tricks on me?

@schoenkaft
Copy link

I can confirm the same behaviour on Chrome 40 (latest stable) and Safari 8.0.3 (latest stable) on OS X. It's very annoying and it's actually a poor user experience, and should be prevented at any point. Pikaday is a 'user-interface object', not 'content' that should be selectable.

Here's a screenshot when selecting a date from Pikaday (PIkaday is closed after selecting a date, but all other surrounding object get select):

screen shot 2015-02-18 at 03 53 51

Of course there's custom styling and functions, but still selecting a date should prevent any other event from firing.

Using user-select: none on any element near and crazy pointer-events would be a poor solution
A simple fix should be to add e.preventDefault(); to self._onMouseDown = function(e) in Pikaday = function(options).
This should still bubble up, but prevent any 'default' browser behaviour, including the 'non-wanted' select. Any thoughts on this?

@rikkert
Copy link
Member

rikkert commented Feb 18, 2015

Does it work? :)

@owenmead owenmead mentioned this issue Mar 3, 2015
Closed
@rikkert
Copy link
Member

rikkert commented Mar 17, 2015

Had to remove the preventDefault because it breaks the month and year dropdown.

@rikkert rikkert reopened this Mar 17, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@forwardever @rikkert @schoenkaft @Tom303