Remove disableTouchKeyboard and forced focus

lubomirblazekcz commented 2 years ago

https://github.com/mymth/vanillajs-datepicker/blob/4843b2f8527e0dda08db9d12091796f0e570fce7/dist/js/datepicker-full.js#L1537

This line prevents me from extend the datepicker with timepicker for example. obrazek

Because everytime I click into the time input, the focus is lost. I'm not even sure what's the purpose of that focus function.

Anyway, I think disabling touch keyboard should be done with inputmode="none", it's a better approach

mymth commented 2 years ago

In order for keyboard operation to work, the input field has to be focused. If the focus is not moved back to the input field there, it goes to <body> and no keydown event will be fired on the input field until you manually move the focus back. You'll be unable to move to the adjacent field by tab key press too.

Also, to prevent the input filed from losing focus by other than user's intention, that listener function is added to the capture phase of the input field's click event so that it runs before all other on-click stuff is executed. (#21, #47) For this reason, if you want the stuff you injected to the date picker to get the focus, you need to patch the function to be something like this:

export function onClickPicker(datepicker, ev) {
  if (ev.target.matches('.timepicker') {
    // do the timepicker stuff
    // ...
  } else if (!datepicker.inline && !datepicker.config.disableTouchKeyboard) {
    datepicker.inputField.focus();
  }
};

You might see the date picker behave unexpectedly if you don't move the focus back to the input field appropriately after time picking is done.

As for disableTouchKeyboard, (I might remember something wrong because my memory is vague now...) I considered rewriting it with inputmode="none" and concluded that, since it's an <input> element's attribute, it should be coded in user's HTML and should not be overridden by the program. And just in case someone wants it for backward compatibility, I decided to leave it so that it to work in the same way as bootstrap-datepicker. But now I'm thinking about removing the option because I noticed it no longer works as expected on my iPhone.

lubomirblazekcz commented 2 years ago

I see, I did not realize it's there for tabulator and overall accessbility. Would you consider editing the function with the option for ignored elements maybe? Or maybe the focus should be triggered only on datepicker action elements as .datepicker-cell and .button?

Extending the picker with timepicker or anything other than that would be easier after that, and I can always trigger the focus back to input manually after that.

And yeah using inputmode="none" should be definetly on the user, since it's native attribute. I think disableTouchKeyboard is kind of redundant option now. But I would leave info how to disable mobile keyboard in docs, not all people know about inputmode, for some it's still something new :)

mymth / vanillajs-datepicker

Remove disableTouchKeyboard and forced focus #78