Dragging the drums out of the modal should not trigger close
Opened this issue · 4 comments
I'm submitting a...
[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report
[ ] Feature request
[ ] Documentation issue or request
Current behavior
When using PickerJS not in inline mode, dragging drums out of the modal closes it.
Expected behavior
If a user releases the drum outside of the modal, PickerJS should not close the modal. Instead, it should set whatever the value it landed on for it.
Minimal reproduction of the problem with instructions
CodePen (Sorry I had to pull the JS and the CSS from your GH pages, if there's any problem I'll fix it right away)
- Make sure you use a mouse (and a PC) for this reproduction. This is not the case for mobile devices.
- Click the input.
- Drag one of the picker drums that appears. Make sure you drag out of the modal.
- The modal closes without updating the input field.
What is the motivation / use case for changing the behavior?
This is for those who want to change DateTime values in the PickerJS in a large amount with mice. Right now, we need to drag it so that we don't go out of the modal and get all the changes cancelled.
Environment
Picker.js version: 1.2.1
Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [x] Firefox version 66.0.2 (macOS / PC)
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [x] Edge version 42.17134.1.0
Others:
@fengyuanchen may I know why you labeled this issue question? I thought this was a bug report. Were there anything unclear?
@Clpsplug Sorry, I'm not sure what the drums is meaning exactly.
@fengyuanchen
Oops, sorry! The 'drums' I'm talking about is the 'spinning' parts of your DateTimePicker.
For example, in the picker in the screenshot below, there are five 'drums' you can drag and 'spin' to pick the time.
Each 'drum' has a total of four adjacent values (as for the 'year' drum, it has '2017, 2018, 2020, 2021' alongside of 2019 which is the current selection.)
When you release the mouse on the transparent model, it will trigger a click event on the transparent model and then close the picker.