[Bug] append-to-body tag auto submit form

[lauranoreen]

I updated the vue2-datepicker version to 3.2. After that I had to rewrite my datepicker implementations. In my case I use different bootstrap vue modals to handle forms. In these forms I have datepickers but the calendar appears behind the modal (screenshot) so I added :append-to-body="false" to use the calendar again. After that I noticed that by changing the month (with the arrows) my form will automatically submitted.

Here is a quick example (without modal):

<template>
<div>
<b-form @submit="onSubmit">
      <date-picker v-model="test" format="DD.MM.YYYY" :append-to-body="false"></date-picker>
      <b-button type="submit" variant="primary">Senden</b-button>
</b-form>
</div>
</template>

<script>
import DatePicker from 'vue2-datepicker'
import 'vue2-datepicker/index.css'
import 'vue2-datepicker/locale/de'

export default {
  components: {
    DatePicker
  },
  data() {
    return {
      test: ''
    }
  },
  methods: {
    onSubmit(evt) {
      console.log('submit', this.test)
      evt.preventDefault()
    }
  }
}
</script>

If I delete the append-to-body tag the arrows from the calendar would not submit the form.
Any ideas how to fix it?

Vue2-datepicker version: 3.2.1
Vue version: 2.6.10
Browser: Firefox

[mengxiong10]

the calendar appears behind the modal >> you can change the zIndex of .mx-datepicker-popup.

For the second problem:
The arrow is a Button without type, Button's type is 'submit' by default, so it'll submit the form.
I'll change the Button type to 'button' soon.

My suggestion is that you remove append-to-body now and modify the zIndex to see if it works

[lauranoreen]

Thanks for your quick reply.
By changing the z index and removing the append-to-body tag the problem is fixed.

[mengxiong10]

v3.2.2 fixed the button type.