date-picker not working inside bootstrap-vue modal

[alexraileanu]

related to #23. i have the same issue and was able to reproduce it.

when adding vue-date-pick inside a bootstrap-vue modal, the popup to select the date appears but fails to set the date.

example code:

<template>
  <div id="app">
    <button @click="showModal = !showModal">trigger modal</button>

    <b-modal ref="modal" v-model="showModal">
      <div>
        <vue-date-pick v-model="date" format="DD-MM-YYYY HH:mm" :pick-time="true"/>
      </div>
    </b-modal>
  </div>
</template>

<script>
import { BModal } from "bootstrap-vue";
import VueDatePick from "vue-date-pick";

import "vue-date-pick/dist/vueDatePick.css";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";

export default {
  name: "App",
  components: {
    BModal,
    VueDatePick
  },
  data() {
    return {
      date: "",
      showModal: false
    };
  }
};
</script>

as for versions, this has been tested with [email protected], [email protected] and [email protected].

[pierreben]

Hi,

I confirm the issue, I've created a Codesandbox to illustrate it: https://codesandbox.io/embed/vue-date-pick-28-dfllc.

The bug occurs on this line: https://github.com/dbrekalo/vue-date-pick/blob/master/src/vueDatePick.vue#L531 because the target of the click event is always the modal-content even when the user has clicked on the datepicker.

With a bootstrap b-form-input field in the modal, the event target is correct when I click on the input, so it look like it's related to CSS position.

Any idea on how to resolve this issue ? Many thanks

[massmediagroup-73]

Have the same issue. If remove focusin event from ['click', 'keyup', 'focusin'].forEach( eventName => document.addEventListener(eventName, this.closeEventListener) ); The problem is gone.

[qstiegler]

@massmediagroup-73 Solution worked for me as well. Please fix it.

[car3oon]

The solution made by @massmediagroup-73 did the job for me as well. Any chances to fix this one anytime soon?

[ralphskie]

having this same issue right now. the solution above seems good but still just temporary.

[JoaoHamerski]

Have the same issue. If remove focusin event from ['click', 'keyup', 'focusin'].forEach( eventName => document.addEventListener(eventName, this.closeEventListener) ); The problem is gone.

Am i the only who dont have a clue how to implement it to work? Where i put this code?

EDIT: Nevermind, i just found out, here is a better explained answer:

The DatePick object has the following method:

addCloseEvents() {
    if (!this.closeEventListener) {
        this.closeEventListener = e => this.inspectCloseEvent(e);
        ['click', 'keyup', 'focusin'].forEach(
            eventName => document.addEventListener(eventName, this.closeEventListener)
        );
    }
},

You have to override the entire method removing the 'focusing' from the array.

Just add this:

import DatePick from 'vue-date-pick';

Vue.component('date-pick', mergeRecursive(DatePick, {
  methods: {
    addCloseEvents() {
      if (!this.closeEventListener) {
        this.closeEventListener = e => this.inspectCloseEvent(e);
        ['click', 'keyup'].forEach(
            eventName => document.addEventListener(eventName, this.closeEventListener)
        );
        }
      },
    }
}));

Here is the code to "mergeRecursive" function that merge two objects keeping the properties, add it to your application: https://stackoverflow.com/a/383245/14671559