mymth / vanillajs-datepicker

A vanilla JavaScript remake of bootstrap-datepicker for Bulma and other CSS frameworks
MIT License
720 stars 147 forks source link

Addition option request: showOnArrowDown #119

Closed K-Thompson closed 1 year ago

K-Thompson commented 1 year ago

Please consider adding to Options showOnArrowDown, which should default to true so as not to be a breaking change.

This is my use case.

I'm using vanillajs-datepicker in a column of dates within a table element. My code has logic which uses appendChild() to append an input element with a datepicker to TD elements. Pressing the up and down arrow keys moves the input (with focus) up and down the column. Datepicker's behavior is not consistent in this case since the datapicker is shown when moving down, and it is not shown when moving up the column. (Additionally, the datepicker displays to the user the date from the table cell that has lost focus - which also is a problem.)

In my case, the user can select the datepicker by clicking (or touching) on a button in the table cell.

I was looking at dist\js\datepicker.js, and I made some edits to test:

// config options updatable by setOptions() and their default values
const defaultOptions = {
   ....
   // added
   showOnArrowDown: true,
   escapeToggles: true
};

The as needed I made modification in the keydown event handler,

Examples:

if (!picker.active) {
   if (key === 'ArrowDown' && datepicker.config.showOnArrowDown) {
      picker.show();
} else if (key === 'Escape' && datepicker.config.escapeToggles) {
   picker.show();

I would have put together a pull request, but I quickly looked at the code, and I didn't understand how I would have to update js\options\processOptions.js

Introducing the option, escapeToggles could be used to address issue 103 without causing a breaking change. And for my case, when attached to a table cell, I want Escape to fire a blur event, not open the datepicker.