fix(datepicker): Clear date via delete/backspace key

src/components/DateInput.vue

@@ -44,6 +44,8 @@
       @blur="handleInputBlur"
       @click="handleInputClick"
       @focus="handleInputFocus"
+      @keydown.backspace="handleDelete"
+      @keydown.delete="handleDelete"
       @keydown.down.prevent="handleKeydownDown"
       @keydown.enter.prevent="handleKeydownEnter"
       @keydown.esc.prevent="handleKeydownEscape"
@@ -206,6 +208,14 @@ export default {
         this.shouldToggleOnFocus = true
       }
     },
+    /**
+     * Clears the calendar when the `delete` or `backspace` key is pressed
+     */
+    handleDelete() {
+      if (!this.typeable && this.selectedDate) {
+        this.clearDate()
+      }
+    },
     /**
      * Toggles the calendar (unless `show-calendar-on-button-click` is true)
      */

src/components/Datepicker.vue

@@ -389,9 +389,14 @@ export default {
      * Clear the selected date
      */
     clearDate() {
+      if (!this.selectedDate) {
+        return
+      }
+
       this.selectedDate = null
       this.focus.refs = ['input']
       this.close()
+      this.setPageDate()
 
       this.$emit('selected', null)
       this.$emit('input', null)

test/e2e/specs/ClearOnDelete.feature

@@ -0,0 +1,17 @@
+Feature: Clear date on delete
+  As a user
+  I want to press the delete or backspace key
+  So that I can clear the date
+
+
+  @id-1
+  Scenario Outline: Clear date via "<key>"
+    Given the calendar has a selected date
+    When the user focuses the input field and presses "<key>"
+    Then the date is cleared
+    And the input field has focus
+
+    Examples:
+      | # | key       |
+      | 1 | backspace |
+      | 2 | del       |

test/e2e/specs/ClearOnDelete/index.js

@@ -0,0 +1,28 @@
+import { Given, When, Then, And } from 'cypress-cucumber-preprocessor/steps'
+
+const { createCalendar, focusThe, the } = cy
+
+describe('Clear date on delete', () => {
+  describe('@id-1: Clear date via {string}', () => {
+    Given('the calendar has a selected date', () => {
+      createCalendar({
+        value: new Date(2020, 2, 15),
+      })
+      the('calendar').should('not.be.visible')
+      the('input').should('have.value', '15 Mar 2020')
+    })
+
+    When('the user focuses the input field and presses {string}', (key) => {
+      // Use force as a non-typeable calendar input is `read-only`
+      focusThe('input').type(`{${key}}`, { force: true })
+    })
+
+    Then('the date is cleared', () => {
+      the('input').should('have.value', '')
+    })
+
+    And('the input field has focus', () => {
+      the('input').should('be.focused')
+    })
+  })
+})

test/unit/specs/DateInput/DateInput.spec.js

@@ -215,4 +215,18 @@ describe('DateInput', () => {
 
     expect(wrapper.emitted('open')).toBeTruthy()
   })
+
+  it('emits `clear-date` when delete is pressed', async () => {
+    const input = wrapper.find('input')
+
+    await input.trigger('keydown.del')
+    expect(wrapper.emitted('clear-date')).toBeTruthy()
+  })
+
+  it('emits `clear-date` when backspace is pressed', async () => {
+    const input = wrapper.find('input')
+
+    await input.trigger('keydown.backspace')
+    expect(wrapper.emitted('clear-date')).toBeTruthy()
+  })
 })