Resolve flicker on showCalendarByFocus

src/components/DateInput.vue

@@ -92,6 +92,8 @@ export default {
  const constructedDateUtils = makeDateUtils(this.useUtc)
  return {
  input: null,
+ isFocusedUsed: false,
+ isBlurred: false,
  typedDate: '',
  utils: constructedDateUtils,
  }
@@ -141,23 +143,16 @@ export default {
  this.$emit('clear-date')
  },
  /**
- * Submits a typed date if it's valid
+ * submit typedDate and emit a blur event
  */
  inputBlurred() {
+ this.isBlurred = this.isOpen
  if (this.typeable) {
- const parsableDate = this.parseDate(this.input.value)
- const parsedDate = Date.parse(parsableDate)
-
- if (Number.isNaN(parsedDate)) {
- this.clearDate()
- } else {
- this.input.value = this.formattedDate
- this.typedDate = ''
- this.$emit('typed-date', parsedDate)
- }
+ this.submitTypedDate()
  }
  this.$emit('blur')
  this.$emit('close-calendar')
+ this.isFocusedUsed = false
  },
  /**
  * Attempt to parse a typed date
@@ -191,21 +186,47 @@ export default {
  this.parser,
  )
  },
- toggleCalendar() {
- this.$emit(this.isOpen ? 'close-calendar' : 'show-calendar')
- },
  showCalendarByClick() {
- if (!this.showCalendarOnButtonClick) {
+ const isFocusedUsed = this.showCalendarOnFocus && !this.isFocusedUsed
+
+ if (!this.showCalendarOnButtonClick && !isFocusedUsed) {
  this.toggleCalendar()
  }
+
+ if (this.showCalendarOnFocus) {
+ this.isFocusedUsed = true
+ }
  },
  showCalendarByFocus() {
  if (this.showCalendarOnFocus) {
  this.$emit('show-calendar')
  }
 
+ this.isBlurred = false
  this.$emit('focus')
  },
+ /**
+ * Submits a typed date if it's valid
+ */
+ submitTypedDate() {
+ const parsableDate = this.parseDate(this.input.value)
+ const parsedDate = Date.parse(parsableDate)
+
+ if (Number.isNaN(parsedDate)) {
+ this.clearDate()
+ } else {
+ this.input.value = this.formattedDate
+ this.typedDate = ''
+ this.$emit('typed-date', parsedDate)
+ }
+ },
+ toggleCalendar() {
+ if (!this.isOpen && this.isBlurred) {
+ this.isBlurred = false
+ return
+ }
+ this.$emit(this.isOpen ? 'close-calendar' : 'show-calendar')
+ },
  },
 }
 </script>

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

@@ -11,15 +11,17 @@ describe('DateInput unmounted', () => {
 
 describe('DateInput', () => {
  let wrapper
-
- beforeEach(() => {
- wrapper = shallowMount(DateInput, {
+ const createWrapper = () => {
+ return shallowMount(DateInput, {
  propsData: {
  selectedDate: new Date(2018, 2, 24),
  format: 'dd MMM yyyy',
  translation: en,
  },
  })
+ }
+ beforeEach(() => {
+ wrapper = createWrapper()
  })
 
  afterEach(() => {
@@ -120,6 +122,12 @@ describe('DateInput', () => {
  expect(wrapper.emitted('close-calendar')).toBeTruthy()
  })
 
+ it('should open the calendar on click', async () => {
+ wrapper.find('input').trigger('click')
+ await wrapper.vm.$nextTick()
+ expect(wrapper.emitted('show-calendar')).toBeTruthy()
+ })
+
  it('should open the calendar on focus', async () => {
  wrapper.find('input').trigger('focus')
  expect(wrapper.emitted('show-calendar')).toBeFalsy()

test/unit/specs/Datepicker/Datepicker.spec.js

@@ -50,6 +50,64 @@ describe('Datepicker mounted', () => {
  input.trigger('focus')
  expect(wrapper.emitted().focus).toBeTruthy()
  })
+
+ it('should open the calendar with click on input when showCalendarOnFocus = true', async () => {
+ await wrapper.setProps({
+ showCalendarOnFocus: true,
+ })
+ const input = wrapper.find('input')
+
+ await input.trigger('focus')
+ await input.trigger('click')
+ await wrapper.vm.$nextTick()
+ expect(wrapper.vm.isOpen).toBeTruthy()
+ })
+
+ it('should toggle the calendar via the calendar button', async () => {
+ await wrapper.setProps({
+ calendarButton: true,
+ })
+
+ const calendarButton = wrapper.find('span.vdp-datepicker__calendar-button')
+
+ await calendarButton.trigger('click')
+ expect(wrapper.vm.isOpen).toBeTruthy()
+
+ await calendarButton.trigger('click')
+ expect(wrapper.vm.isOpen).toBeFalsy()
+ })
+
+ it('should toggle the calendar via the calendar button when showCalendarOnFocus = true', async () => {
+ await wrapper.setProps({
+ calendarButton: true,
+ showCalendarOnFocus: true,
+ })
+
+ const calendarButton = wrapper.find('span.vdp-datepicker__calendar-button')
+
+ await calendarButton.trigger('click')
+ expect(wrapper.vm.isOpen).toBeTruthy()
+
+ await calendarButton.trigger('click')
+ expect(wrapper.vm.isOpen).toBeFalsy()
+ })
+
+ it('should close the calendar via the calendar button, despite input being focused', async () => {
+ await wrapper.setProps({
+ calendarButton: true,
+ showCalendarOnFocus: true,
+ })
+
+ const input = wrapper.find('input')
+ const calendarButton = wrapper.find('span.vdp-datepicker__calendar-button')
+
+ await input.trigger('focus')
+ expect(wrapper.vm.isOpen).toBeTruthy()
+
+ await input.trigger('blur')
+ await calendarButton.trigger('click')
+ expect(wrapper.vm.isOpen).toBeFalsy()
+ })
 })
 
 describe('Datepicker shallowMounted', () => {