@limetech/lime-elements 40.22.0 → 40.24.0

package/dist/collection/components/date-picker/date-picker.js

@@ -1,8 +1,10 @@
 import { h, } from "@stencil/core";
+import { createLiveMessage } from "../../util/live-message";
 import { createRandomString } from "../../util/random-string";
 import { isAndroidDevice, isIOSDevice } from "../../util/device";
 import { DateFormatter } from "./date-formatter";
 import { MDCTextField } from "@material/textfield";
+import translate from "../../global/translations";
 // tslint:disable:no-duplicate-string
 const nativeTypeForConsumerType = {
     date: 'date',
@@ -37,6 +39,7 @@ const nativeFormatForType = {
  * @exampleComponent limel-example-date-picker-programmatic-change
  * @exampleComponent limel-example-date-picker-composite
  * @exampleComponent limel-example-date-picker-custom-formatter
+ * @exampleComponent limel-example-date-picker-typed-input
  */
 export class DatePicker {
     constructor() {
@@ -55,7 +58,8 @@ export class DatePicker {
         this.readonly = false;
         /**
          * Set to `true` to indicate that the current value of the date picker is
-         * invalid.
+         * invalid. Typed text that is not a valid date is flagged by the
+         * component itself, whatever this is set to.
          */
         this.invalid = false;
         /**
@@ -72,15 +76,85 @@ export class DatePicker {
          */
         this.language = 'en';
         this.showPortal = false;
+        this.parseError = false;
+        this.isEditing = false;
         this.portalId = `date-picker-calendar-${createRandomString()}`;
+        // Screen readers don't announce a changed description of the focused
+        // field, so the error is spoken through a live region.
+        this.errorMessage = createLiveMessage(() => this.parseError ? this.getHelperText() : '');
         this.documentClickListener = (event) => {
             if (event.composedPath().includes(this.textField)) {
                 return;
             }
             const element = document.querySelector(`#${this.portalId}`);
-            if (!element.contains(event.target)) {
-                this.hideCalendar();
+            if (element.contains(event.target)) {
+                return;
+            }
+            // The input's own blur, which follows, closes the calendar with the
+            // final typed text.
+            if (this.textField.shadowRoot.activeElement === this.inputElement) {
+                return;
+            }
+            this.hideCalendar();
+        };
+        this.handleKeyDown = (event) => {
+            var _a;
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            this.discardedText = undefined;
+            const handlers = {
+                ArrowDown: this.handleArrowDown,
+                Escape: this.handleEscape,
+                Enter: this.handleEnter,
+                Backspace: this.handleDelete,
+                Delete: this.handleDelete,
+            };
+            (_a = handlers[event.key]) === null || _a === void 0 ? void 0 : _a.call(handlers, event);
+        };
+        this.handleArrowDown = async (event) => {
+            var _a;
+            event.preventDefault();
+            if (!this.showPortal) {
+                this.showPortal = true;
+                return;
+            }
+            await ((_a = this.datePickerCalendar) === null || _a === void 0 ? void 0 : _a.focusDay());
+        };
+        // The first Escape discards typed text, the next closes the calendar.
+        // Stopping it keeps a surrounding dialog open.
+        this.handleEscape = (event) => {
+            if (this.hasTypedText()) {
+                this.discardTypedText();
+            }
+            else if (this.showPortal) {
+                this.showPortal = false;
             }
+            else {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        // Reads the input, since the input field emits its text debounced.
+        this.handleEnter = () => {
+            var _a, _b;
+            if (!this.acceptsTypedInput()) {
+                return;
+            }
+            const currentText = (_b = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
+            this.rawInputValue = currentText;
+            if (currentText !== '' && !this.parseText(currentText)) {
+                this.parseError = true;
+                return;
+            }
+            this.commitTypedText();
+        };
+        this.handleDelete = () => {
+            if (this.acceptsTypedInput() || !this.value) {
+                return;
+            }
+            this.clearValue();
         };
         this.formatValue = (value) => this.dateFormatter.formatDate(value, this.internalFormat);
         this.handleCalendarChange = this.handleCalendarChange.bind(this);
@@ -94,6 +168,8 @@ export class DatePicker {
         this.nativeChangeHandler = this.nativeChangeHandler.bind(this);
         this.preventBlurFromCalendarContainer =
             this.preventBlurFromCalendarContainer.bind(this);
+        this.commitTypedText = this.commitTypedText.bind(this);
+        this.handleInputBlur = this.handleInputBlur.bind(this);
     }
     componentWillLoad() {
         this.useNative = !this.readonly && (isIOSDevice() || isAndroidDevice());
@@ -103,7 +179,28 @@ export class DatePicker {
         this.updateInternalFormatAndType();
     }
     disconnectedCallback() {
+        var _a;
         this.removeDocumentListeners();
+        (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('blur', this.handleInputBlur);
+        this.errorMessage.update.cancel();
+    }
+    // Consumers such as `limel-form` pass a new `Date` on every render.
+    watchValue(newValue, oldValue) {
+        if ((newValue === null || newValue === void 0 ? void 0 : newValue.getTime()) === (oldValue === null || oldValue === void 0 ? void 0 : oldValue.getTime())) {
+            return;
+        }
+        this.resetTypedText();
+    }
+    watchParseError() {
+        this.errorMessage.update();
+        this.invalidInput.emit(this.parseError ? this.getInvalidInputMessage() : null);
+    }
+    watchFormatInputs() {
+        this.resetTypedText();
+    }
+    watchLanguage() {
+        this.dateFormatter = new DateFormatter(this.language);
+        this.resetTypedText();
     }
     render() {
         const inputProps = {
@@ -112,24 +209,56 @@ export class DatePicker {
         if (this.value && !this.readonly && !this.disabled) {
             inputProps.trailingIcon = 'clear_symbol';
         }
-        const helperText = this.disabled || this.readonly ? undefined : this.helperText;
+        const helperText = this.getHelperText();
         if (this.useNative) {
             return (h("limel-input-field", { disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, helperText: helperText, required: this.required, value: this.formatValue(this.value), type: this.nativeType, onChange: this.nativeChangeHandler }));
         }
         const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
         const formatter = this.formatter || this.formatValue;
         return [
-            h("limel-input-field", Object.assign({ disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, placeholder: this.placeholder, helperText: helperText, required: this.required, value: this.value ? formatter(this.value) : '', onFocus: this.showCalendar, onBlur: this.hideCalendar, onClick: this.onInputClick, onChange: this.handleInputElementChange, ref: (el) => (this.textField = el) }, inputProps)),
-            h("limel-portal", { containerId: this.portalId, visible: this.showPortal, containerStyle: { 'z-index': dropdownZIndex } }, h("limel-flatpickr-adapter", { format: this.internalFormat, language: this.language, type: this.type, value: this.value, ref: (el) => (this.datePickerCalendar = el), isOpen: this.showPortal, formatter: formatter, onChange: this.handleCalendarChange })),
+            h("limel-input-field", Object.assign({ disabled: this.disabled, readonly: this.readonly, invalid: this.invalid || this.parseError, label: this.label, placeholder: this.placeholder, helperText: helperText, required: this.required, value: this.getDisplayValue(formatter), onFocus: this.showCalendar, onBlur: this.hideCalendar, onClick: this.onInputClick, onChange: this.handleInputElementChange, onKeyDown: this.handleKeyDown, ref: (el) => (this.textField = el) }, inputProps)),
+            h("span", { class: "error-message", "aria-live": "polite", ref: this.errorMessage.setElement }),
+            h("limel-portal", { containerId: this.portalId, visible: this.showPortal, containerStyle: { 'z-index': dropdownZIndex } }, h("limel-flatpickr-adapter", { format: this.internalFormat, language: this.language, type: this.type, value: this.value, previewValue: this.previewValue, ref: (el) => (this.datePickerCalendar = el), isOpen: this.showPortal, onChange: this.handleCalendarChange })),
         ];
     }
+    getDisplayValue(formatter) {
+        if (this.rawInputValue !== undefined) {
+            return this.rawInputValue;
+        }
+        if (!this.value) {
+            return '';
+        }
+        return this.isEditing && this.acceptsTypedInput()
+            ? this.formatValue(this.value)
+            : formatter(this.value);
+    }
+    acceptsTypedInput() {
+        return !this.formatter || !!this.format;
+    }
+    getHelperText() {
+        if (this.parseError) {
+            return this.getInvalidInputMessage();
+        }
+        if (this.disabled || this.readonly) {
+            return undefined;
+        }
+        return this.helperText;
+    }
+    getInvalidInputMessage() {
+        const key = this.type === 'time'
+            ? 'date-picker.invalid-time-format'
+            : 'date-picker.invalid-format';
+        return translate.get(key, this.language, {
+            example: this.formatValue(new Date()),
+        });
+    }
     updateInternalFormatAndType() {
         this.nativeType = nativeTypeForConsumerType[this.type || 'default'];
         this.nativeFormat = nativeFormatForType[this.nativeType];
         if (this.useNative) {
             this.internalFormat = this.nativeFormat;
         }
-        else if (this.formatter || this.format) {
+        else if (this.format) {
             this.internalFormat = this.format;
         }
         else {
@@ -138,19 +267,27 @@ export class DatePicker {
     }
     nativeChangeHandler(event) {
         event.stopPropagation();
-        const date = this.dateFormatter.parseDate(event.detail, this.internalFormat);
-        this.change.emit(date);
+        if (event.detail === '') {
+            this.clearValue();
+            return;
+        }
+        const date = this.parseText(event.detail);
+        if (date) {
+            this.change.emit(date);
+        }
     }
     showCalendar(event) {
         if (this.disabled || this.readonly) {
             event.stopPropagation();
             return;
         }
+        this.isEditing = true;
         this.showPortal = true;
-        const inputElement = this.textField.shadowRoot.querySelector('input');
-        setTimeout(() => {
-            this.datePickerCalendar.inputElement = inputElement;
-        }, 0);
+        this.setUpInputElement();
+        // Wait for the adapter to render. This creates the calendar.
+        queueMicrotask(() => {
+            this.datePickerCalendar.inputElement = this.inputElement;
+        });
         event.stopPropagation();
         document.addEventListener('mousedown', this.documentClickListener, {
             passive: true,
@@ -159,6 +296,25 @@ export class DatePicker {
             capture: true,
         });
     }
+    // Tabbing to the clear icon doesn't blur the input field, only its
+    // input. Its `readonly` prop would also stop the calendar from opening.
+    setUpInputElement() {
+        this.inputElement = this.textField.shadowRoot.querySelector('input');
+        this.inputElement.readOnly = !this.acceptsTypedInput();
+        this.inputElement.addEventListener('blur', this.handleInputBlur);
+    }
+    handleInputBlur(event) {
+        const nextFocus = event.relatedTarget;
+        this.commitTypedText();
+        if (!nextFocus) {
+            return;
+        }
+        requestAnimationFrame(() => {
+            if (!nextFocus.isConnected) {
+                this.inputElement.focus();
+            }
+        });
+    }
     preventBlurFromCalendarContainer(event) {
         // We don't want the input element to lose focus when we pick
         // a date in the calendar container.
@@ -170,6 +326,8 @@ export class DatePicker {
         }
     }
     hideCalendar() {
+        this.isEditing = false;
+        this.commitTypedText();
         setTimeout(() => {
             this.showPortal = false;
         }, 0);
@@ -192,15 +350,21 @@ export class DatePicker {
         }
         const mdcTextField = new MDCTextField(root);
         mdcTextField.getDefaultFoundation().deactivateFocus();
-        mdcTextField.valid = !this.invalid;
+        mdcTextField.valid = !(this.invalid || this.parseError);
+        // Removes the listeners but keeps the classes set above.
+        mdcTextField.destroy();
     }
     handleCalendarChange(event) {
-        const date = event.detail;
+        var _a;
         event.stopPropagation();
+        // Reset before hiding, or text typed earlier is committed over the
+        // pick. Preview the pick until the consumer echoes it back.
+        this.resetTypedText();
+        this.previewValue = (_a = event.detail) !== null && _a !== void 0 ? _a : undefined;
         if (this.pickerIsAutoClosing()) {
             this.hideCalendar();
         }
-        this.change.emit(date);
+        this.change.emit(event.detail);
     }
     onInputClick(event) {
         if (this.disabled || this.readonly || this.showPortal) {
@@ -209,19 +373,99 @@ export class DatePicker {
         this.showCalendar(event);
     }
     handleInputElementChange(event) {
-        if (this.disabled || this.readonly) {
-            event.stopPropagation();
+        event.stopPropagation();
+        if (this.disabled || this.readonly || !this.acceptsTypedInput()) {
             return;
         }
-        if (event.detail === '') {
-            this.clearValue();
+        const text = event.detail;
+        if (text === this.discardedText) {
+            return;
+        }
+        const date = text === '' ? null : this.parseText(text);
+        this.rawInputValue = text;
+        this.previewValue = date !== null && date !== void 0 ? date : undefined;
+        // Half-typed text is only flagged on commit.
+        if (date || text === '') {
+            this.parseError = false;
+        }
+    }
+    hasTypedText() {
+        var _a;
+        return (this.rawInputValue !== undefined ||
+            ((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value) !== this.getCommittedText());
+    }
+    // The input field only rewrites its text when its `value` changes.
+    discardTypedText() {
+        var _a;
+        this.discardedText = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value;
+        this.resetTypedText();
+        if (this.inputElement) {
+            this.inputElement.value = this.getCommittedText();
         }
-        event.stopPropagation();
+    }
+    getCommittedText() {
+        return this.getDisplayValue(this.formatter || this.formatValue);
+    }
+    commitTypedText() {
+        const text = this.rawInputValue;
+        if (text === undefined || text === this.committedText) {
+            return;
+        }
+        const currentText = this.value ? this.formatValue(this.value) : '';
+        if (text === currentText) {
+            this.resetTypedText();
+            return;
+        }
+        if (text === '') {
+            this.commitEmptyText();
+            return;
+        }
+        this.commitDate(text);
+    }
+    commitEmptyText() {
+        this.parseError = false;
+        if (this.value) {
+            this.emitCommitted('', null);
+        }
+        else {
+            this.rawInputValue = undefined;
+        }
+    }
+    commitDate(text) {
+        var _a;
+        const date = this.parseText(text);
+        if (!date) {
+            this.parseError = true;
+            return;
+        }
+        if (date.getTime() === ((_a = this.value) === null || _a === void 0 ? void 0 : _a.getTime())) {
+            this.resetTypedText();
+            return;
+        }
+        this.parseError = false;
+        this.emitCommitted(text, date);
+    }
+    // Keeps `rawInputValue` until `watchValue` resets it, or the old value
+    // flashes.
+    emitCommitted(text, date) {
+        this.committedText = text;
+        this.change.emit(date);
+    }
+    parseText(text) {
+        const date = this.dateFormatter.parseDate(text, this.internalFormat);
+        return date && !Number.isNaN(date.getTime()) ? date : null;
+    }
+    resetTypedText() {
+        this.parseError = false;
+        this.committedText = undefined;
+        this.rawInputValue = undefined;
+        this.previewValue = undefined;
     }
     pickerIsAutoClosing() {
         return this.type !== 'datetime' && this.type !== 'time';
     }
     clearValue() {
+        this.resetTypedText();
         this.change.emit(null);
     }
     static get is() { return "limel-date-picker"; }
@@ -290,7 +534,7 @@ export class DatePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Set to `true` to indicate that the current value of the date picker is\ninvalid."
+                    "text": "Set to `true` to indicate that the current value of the date picker is\ninvalid. Typed text that is not a valid date is flagged by the\ncomponent itself, whatever this is set to."
                 },
                 "getter": false,
                 "setter": false,
@@ -348,7 +592,7 @@ export class DatePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Optional helper text to display below the input field when it has focus.\nScreen readers read it as the description of the field, so use it for\nwhat the user needs to know, such as the format of the value or a\nrequirement."
+                    "text": "Optional helper text to display below the input field when it has focus.\nScreen readers read it as the description of the field, so use it for\nwhat the user needs to know, such as the format of the value or a\nrequirement.\n\nWhile the typed text is not a valid date, an error with an example\nof the expected format is shown instead."
                 },
                 "getter": false,
                 "setter": false,
@@ -487,7 +731,7 @@ export class DatePicker {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Custom formatting function. Will be used for date formatting.\n\n:::note\noverrides `format` and `language`\n:::"
+                    "text": "Custom formatting function. Will be used for date formatting.\n\n:::note\noverrides `format` and `language`. A date can only be typed into the\nfield when `format` is set as well, to the pattern your `formatter`\nproduces. Typed text is parsed with `format` and `language`, and the\nfield shows the value in `format` while it is being edited.\n:::"
                 },
                 "getter": false,
                 "setter": false
@@ -497,7 +741,11 @@ export class DatePicker {
     static get states() {
         return {
             "internalFormat": {},
-            "showPortal": {}
+            "showPortal": {},
+            "parseError": {},
+            "rawInputValue": {},
+            "previewValue": {},
+            "isEditing": {}
         };
     }
     static get events() {
@@ -509,7 +757,7 @@ export class DatePicker {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when the date picker value is changed."
+                    "text": "Emitted when a typed date is committed (on blur or `Enter`), when a\ndate is picked in the calendar, and with `null` when the field is\ncleared. Typed text that is not a valid date is not emitted, so\n`value` keeps the last valid date, and `invalidInput` is emitted\ninstead.\n\nA two-digit year is read as a full year, so `1/24/20` is 2020."
                 },
                 "complexType": {
                     "original": "Date",
@@ -521,7 +769,40 @@ export class DatePicker {
                         }
                     }
                 }
+            }, {
+                "method": "invalidInput",
+                "name": "invalidInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted with the error message when typed text that is not a valid\ndate is committed, and with `null` when the field no longer holds\nsuch text."
+                },
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                }
             }];
     }
     static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "watchValue"
+            }, {
+                "propName": "parseError",
+                "methodName": "watchParseError"
+            }, {
+                "propName": "format",
+                "methodName": "watchFormatInputs"
+            }, {
+                "propName": "type",
+                "methodName": "watchFormatInputs"
+            }, {
+                "propName": "language",
+                "methodName": "watchLanguage"
+            }];
+    }
 }

package/dist/collection/components/date-picker/flatpickr-adapter/flatpickr-adapter.js

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import translate from "../../../global/translations";
 import { DatePicker as DateOnlyPicker } from "../pickers/date-picker";
 import { DatetimePicker } from "../pickers/datetime-picker";
@@ -60,9 +60,14 @@ export class DatePickerCalendar {
                 break;
             }
         }
-        if (this.formatter) {
-            this.picker.formatter = this.formatter;
+    }
+    // `componentDidUpdate` ignores `value` while the calendar is open.
+    watchPreviewValue() {
+        var _a;
+        if (!this.isOpen) {
+            return;
         }
+        this.picker.setValue((_a = this.previewValue) !== null && _a !== void 0 ? _a : this.value);
     }
     componentDidUpdate() {
         if (!this.flatPickrCreated) {
@@ -73,7 +78,7 @@ export class DatePickerCalendar {
         }
     }
     createFlatpickr() {
-        var _a, _b;
+        var _a, _b, _c;
         if (!this.inputElement) {
             // The input element is programatically set on this element
             // after its been rendered.
@@ -83,9 +88,21 @@ export class DatePickerCalendar {
             ((_b = (_a = this.container).checkVisibility) === null || _b === void 0 ? void 0 : _b.call(_a)) === false) {
             return;
         }
-        this.picker.init(this.inputElement, this.container, this.value);
+        // Flatpickr focuses the input it is bound to on Escape, Shift+Tab
+        // and closing, but the proxy is hidden and can't take focus.
+        this.proxyInput.focus = () => this.inputElement.focus();
+        this.picker.init(this.proxyInput, this.container, (_c = this.previewValue) !== null && _c !== void 0 ? _c : this.value);
         this.flatPickrCreated = true;
     }
+    /**
+     * Moves focus to the selected day, else today, else the first day of
+     * the month.
+     * @returns `false` when the calendar has no day grid
+     */
+    async focusDay() {
+        var _a, _b;
+        return (_b = (_a = this.picker) === null || _a === void 0 ? void 0 : _a.focusDay()) !== null && _b !== void 0 ? _b : false;
+    }
     connectedCallback() {
         this.deferredDestroy.cancel();
     }
@@ -96,9 +113,9 @@ export class DatePickerCalendar {
         });
     }
     render() {
-        return (h("div", { key: '86cbefbe9481503480ec3a2d63e333aaa206aecc', class: "container", ref: (el) => (this.container = el), style: {
+        return (h(Host, { key: 'ceea5193e673dbf06b5b39f74ebeaa4f9dfac3be' }, h("input", { key: 'bb62c924bdf96790303f5930e8e0e30b00139e35', type: "text", tabindex: -1, "aria-hidden": "true", hidden: true, ref: (el) => (this.proxyInput = el) }), h("div", { key: '6e6fd47d001c10ef107a8049f27eccd0f4721463', class: "container", ref: (el) => (this.container = el), style: {
                 '--today-label': `"${translate.get('date-picker.today', this.language)}"`,
-            } }));
+            } })));
     }
     static get is() { return "limel-flatpickr-adapter"; }
     static get encapsulation() { return "shadow"; }
@@ -136,6 +153,28 @@ export class DatePickerCalendar {
                 "getter": false,
                 "setter": false
             },
+            "previewValue": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Date",
+                    "resolved": "Date",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Shown as selected instead of `value` while set."
+                },
+                "getter": false,
+                "setter": false
+            },
             "type": {
                 "type": "string",
                 "mutable": false,
@@ -218,7 +257,7 @@ export class DatePickerCalendar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The native input element to use with flatpickr."
+                    "text": "The input the user types into. Setting it creates the calendar."
                 },
                 "getter": false,
                 "setter": false
@@ -249,28 +288,6 @@ export class DatePickerCalendar {
                 "reflect": false,
                 "attribute": "language",
                 "defaultValue": "'en'"
-            },
-            "formatter": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "(date: Date) => string",
-                    "resolved": "(date: Date) => string",
-                    "references": {
-                        "Date": {
-                            "location": "global",
-                            "id": "global::Date"
-                        }
-                    }
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false
             }
         };
     }
@@ -297,4 +314,34 @@ export class DatePickerCalendar {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "focusDay": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Moves focus to the selected day, else today, else the first day of\nthe month.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "`false` when the calendar has no day grid"
+                        }]
+                }
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "previewValue",
+                "methodName": "watchPreviewValue"
+            }];
+    }
 }

package/dist/collection/components/date-picker/pickers/month-picker.js

@@ -45,6 +45,9 @@ export class MonthPicker extends Picker {
     }
     async handleClose(selectedDates) {
         await super.handleClose(selectedDates);
+        this.redrawSelection();
+    }
+    redrawSelection() {
         this.selectMonth(this.flatpickr.selectedDates, this.flatpickr.input.value, this.flatpickr);
     }
     handleReady(_, __, fp) {