search

wffranco / vue-strap

Bootstrap components built with Vue.js
http://wffranco.github.io/vue-strap/
MIT License
338 stars 133 forks source link

v-select does not auto-close after losing focus when rendered on a v-modal #138

Open dschreij opened 7 years ago

dschreij commented 7 years ago

I am bumping into the peculiar situation that v-selects rendered inside a modal (I use the modal vue-strap component) do not close automatically if they lose focus, by for instance selecting another form/v-select element. This way you end up with multiple v-selects being in the expanded state at the same time, often overlapping each other. The only way to close the v-select again is by clicking its box. This doesn't happen when rendering v-selects in other floating components, such as \<asides>. What could be going wrong here?

fourpixels commented 7 years ago

I think this goes for all components, as we have the same issue with DatePicker :(

fourpixels commented 7 years ago

I bet it's because of this line: https://github.com/wffranco/vue-strap/blob/master/src/Modal.vue#L3

<div
    :class="['modal-dialog',{'modal-lg':large,'modal-sm':small}]"
    role="document"
    :style="{width: optionalWidth}"
    @click.stop="action(null)"
>

action called with null just returns, so clicking anywhere inside the modal on something that doesn't have click listener itself just stops the event! Why?!

fourpixels commented 6 years ago

@wffranco Any ideas?