dbrekalo / vue-date-pick

Lightweight and mobile friendly date time picker based on Vue. Vue date pick emphasizes performance, elegant and usable UI on all screen sizes and simplicity of configuration. Has no dependencies on css frameworks or date libraries. Weighs less then 5KB.
https://dbrekalo.github.io/vue-date-pick/
MIT License
251 stars 84 forks source link

Define a custom close event filter passed as property to be applied within the inspectCloseEvent method #78

Open carlouni opened 3 years ago

carlouni commented 3 years ago

There is a bug for the date-picker when using it within Bootstrap 4's modal component.

The user is unable to select the date by clicking on the date in the calendar. This is because whenever the user clicks in the calendar a focusin event gets also fired up from the bootstrap modal that closes the calendar before the click has taken place.

This could also be related to issue #64 (the div element with the tabindex might be firing up an unwanted focusin event ).

With the additional component property customCloseEventFilter the client of the component can pass a custom event filter to prevent ie. an unwanted focusin event from closing the calendar.

The example below prevents an unwanted focusin event from Bootstrap 4's modal.

const wrapper = await shallowMount(VueDatePick, {
    propsData: {
        customCloseEventFilter: e => !e.target.classList.contains('modal')
    },
    attachTo: '#root'
});