Blur event seems not to be fired

[pimhooghiemstra]

I'm submitting a ... (check one with "x")

[ X ] Bug report => search github for a similar issue or PR before submitting
[ ] Feature request
[ ] Other, please describe

Tell about your platform

• eonasdan-bootstrap-datetimepicker version : 4.17.47
• Vue.js version : 2.4.3
• Browser name and version : Chrome 61.0.3163.100
• This package version : 3.0.0

Current behavior I have a table with a column holding dates. My goal is to be able to edit the date inline. Clicking on the date column in a row of the table changes the 'dateEditing' boolean I have set in my data and the column changes to a date-picker component (see code sample below)

        `<td v-if="dateEditing" >
            <date-picker class="deadline" v-model="localDeadline" :config="datepickerConfig" v-focus @input="dateChosen" @blur="resetInput"></date-picker>
        </td>

        <td v-else @click="toggleEditDeadline">
            <span v-text="formatDate"></span>
            <span v-if="loading"><i class="fa fa-refresh fa-spin"></i></span>
            <span v-if="loadingError"><i class="fa fa-exclamation-triangle"></i></span>
        </td>`

This works as expected: the datepicker is shown and when choosing a new date the @input method updates the date and changes the date-picker component for a span showing the date.

However, when the datepicker is open and I click another record this one also changes in a datepicker without the first one returning back to its original state. This way I can have a bunch of records with their date column being an input (see the screenshot provided).

Expected behavior Ideally, a 'blur' event would be triggered when clicking 'outside' the datepicker. I would use this event to return the state of the column to its original, just showing the date in a span. However, the blur event doesn't seem to be triggered.

The datepicker itself is actually hidden so I could also hook into the dp.hide event of the eonasdan datepicker itself but I don't seem to get this working (don't know how to do this)

[ankurk91]

You can hook into dp.hide event like this ->

<date-picker v-model="form.startDate"  ref="startDate"></date-picker>

// mounted hook
$(this.$refs.startDate.$el).on('dp.hide', (e) => {
        console.log('dp.hide', e, e.date);
      });

[pimhooghiemstra]

I just gave it a try. However, since the date-picker is initially not shown, the mounted hook code gives an error

Error in mounted hook: "TypeError: Cannot read property '$el' of undefined"

This is probably due to the v-if I use to show the date-picker component.

Should I wrap the date-picker component in a component and set the mounted hook on that wrapper component?

[ankurk91]

Just release v3.1.0. You should be able to receive all possible events.

<date-picker v-model="date" @dp-hide="doSomethingOnHide"></date-picker>
<date-picker v-model="date" @dp-show="doSomethingOnShow"></date-picker>