Input field should not lose focus when clicking on picker

[xdev1]

It looks really odd that the input field loses focus for a short moment when you click somewhere on the picker.
This seems to be easily fixable:

1. In file pickerListeners.js add the following function:

  export function onMouseDownPicker(ev) {
    ev.preventDefault();
  }

2. In file Picker.js import also onMouseDownPicker and register it:

      ...
   
      import {
        ...
        onMouseDownPicker
      } from '../events/pickerListeners.js';
      
      ...
   
          registerListeners(datepicker, [
             ...
             [element, 'mousedown', onMouseDownPicker],
             ...
          ]);

@mymth Please let me know what you think of this enhancement. I could prepare a PR if you like.

[mymth]

I din't think seriously to solve it because it's bootstrap-datepicker behavior. But thunks, this seems like giving me a hint for the solution of #78

[xdev1]

Okay, thanks for the info. This is something that can also be done in userland, in case someone (like me 😉) does not like the above mentioned vanillajs-/bootstrap-datepicker behavior.
So I will close this issue.

[mymth]

Sorry, It looks like one of the typos I made made you misunderstand. I meant "I didn't think seriously...", not "I don't think seriously..." So I'm willing to make this change.
I think bootstrap-datepicker's this behavior is not intentional and there's no need to follow.
I'll reopen this for my tracking purpose.

[xdev1]

@lubomirblazekcz Could you please do me a favor and check whether the little changes mentioned in the issue description above have any negative impact on your time selector extension here: #25 (comment) ?
Many thanks.

[Edit]: I think, for a simple test, just adding datepicker.picker.element.addEventListener('mousedown', (ev) => ev.preventDefault()) should do the same.

[lubomirblazekcz]

@xdev1 seems to be ok 👍

[lubomirblazekcz]

@xdev1 ok maybe not after all, but it can be easily fixed

I've created new PR #92 to resolve my issues with timepicker extention

I've edited your code a little to work with that change

pickerListeners.js (maybe !datepicker.inline should be there too, doesn't need to be for inline picker)

export function onMouseDownPicker(datepicker, ev) {
  if (!ev.target.matches(datepicker.config.focusIgnoredSelector)) {
    ev.preventDefault();
  }
}

Picker.js

registerListeners(datepicker, [
    ...
    [element, 'mousedown', onMouseDownPicker.bind(null, datepicker)],
    ...
 ]);

[xdev1]

@lubomirblazekcz

Wouldn't the following changes work for your time field extension (I think this should also solve #78)? This is only meant as a just-FYI-alternative solution without the need of an additional config parameter focusIgnoredSelector or something. I personally have no preference here.

[Edited several times]

1. Remove the following lines - I do not think we need them any longer:
   

   vanillajs-datepicker/js/events/pickerListeners.js

   Lines 66 to 70 in fefcf3c

   	export function onClickPicker(datepicker) {
   	if (!datepicker.inline && !datepicker.config.disableTouchKeyboard) {
   	datepicker.inputField.focus();
   	}
   	}

   
   

   vanillajs-datepicker/js/picker/Picker.js

   Line 17 in fefcf3c

   onClickPicker,

   
   

   vanillajs-datepicker/js/picker/Picker.js

   Line 139 in fefcf3c

   [element, 'click', onClickPicker.bind(null, datepicker), {capture: true}],

2. In file pickerListeners.js add the following function:

     export function onMouseDownPicker(datepicker, ev) {
       ev.preventDefault();
      
       if (!datepicker.inline && !datepicker.config.disableTouchKeyboard) {
          datepicker.inputField.focus();
       }
     }

3. In file Picker.js import also onMouseDownPicker and register it:

      ...
   
      import {
        ...
        onMouseDownPicker
      } from '../events/pickerListeners.js';
      
      ...
   
          registerListeners(datepicker, [
             ...
             [element, 'mousedown', onMouseDownPicker.bind(null, datepicker)],
             ...
          ]);

4. Now for your time input element you have to do something like:

     timeInputElement.addEventListener('mousedown', (ev) =>
       ev.stopPropagation();
     );

[lubomirblazekcz]

@xdev1 yeah that works even better, nice. Solves #78 and #92 isn't needed anymore