Topic: Color Picker is not compatible withe Modal
We are using color picker in a Modal.
Expected behavior The color picker should not affecting the Modal showing
Actual behavior The modal will flicker when you are trying to open it.
Resources (screenshots, code snippets etc.) (Looks like the modal is hide first and show again, but as we looking at it's status, it isn't)! Here is how the problem looks like
<template>
<div id="app" :style="{ background: pageBackground }">
<div>
<mdb-btn color="primary" @click.native="modal = true"
>Launch demo modal</mdb-btn
>
<mdb-modal v-if="modal" @close="modal = false">
<mdb-modal-header>
<mdb-modal-title>Modal title</mdb-modal-title>
</mdb-modal-header>
<mdb-modal-body>
<mdb-color-picker
:show="showPicker0"
@getValue="color0 = $event"
@close="showPicker0 = false"
>
<div class="mdb-cp-btn-wrapper">
<div
class="mdb-cp-btn"
:style="{ background: color0 }"
@click="showPicker0 = !showPicker0"
></div>
</div>
</mdb-color-picker>
</mdb-modal-body>
<mdb-modal-footer>
<mdb-btn color="secondary" @click.native="modal = false"
>Close</mdb-btn
>
<mdb-btn color="primary">Save changes</mdb-btn>
</mdb-modal-footer>
</mdb-modal>
</div>
</div>
</template>
I have recreated your issue on a macbook and came up with a walkaround (until we correct this issue in our package) - it renders the color picker after the modal animation is done:
<template>
<div id="app" :style="{ background: pageBackground }">
<div>
<mdb-btn color="primary" @click="toggleModal"
>Launch demo modal</mdb-btn
>
<mdb-modal :show="modal" @close="toggleModal">
<mdb-modal-header>
<mdb-modal-title>Modal title</mdb-modal-title>
</mdb-modal-header>
<mdb-modal-body>
<mdb-color-picker
v-if="enableColorPicker"
:show="showPicker1"
@getValue="color1 = $event"
@close="showPicker1 = false"
>
<div class="mdb-cp-btn-wrapper">
<div
class="mdb-cp-btn"
:style="{ background: color1 }"
@click="showPicker1 = !showPicker1"
></div>
</div>
</mdb-color-picker>
</mdb-modal-body>
<mdb-modal-footer>
<mdb-btn color="secondary" @click="toggleModal"
>Close</mdb-btn
>
<mdb-btn color="primary" @click="toggleModal">Save changes</mdb-btn>
</mdb-modal-footer>
</mdb-modal>
</div>
</div>
</template>
<script>
import mdbColorPicker from 'mdb-color-picker'
import { mdbModal, mdbModalHeader, mdbModalFooter, mdbBtn, mdbModalBody, mdbModalTitle } from 'mdbvue'
export default {
components: {
mdbColorPicker,
mdbModal, mdbModalHeader, mdbModalFooter, mdbBtn, mdbModalBody, mdbModalTitle
},
data() {
return {
color1: '#ff0000ff',
pageBackground: '#ffffff',
showPicker1: false,
modal: false,
enableColorPicker: false
}
},
methods: {
toggleColorPicker() {
this.enableColorPicker = !this.enableColorPicker;
},
toggleModal() {
this.modal = !this.modal;
setTimeout(this.toggleColorPicker, 400);
}
}
}
</script>
I wasn't able to reproduce your issue, although using v-if instead of the `show\ property has resulted in the disappearance of an entry animation - maybe this will fix your problem as well:
<template>
<div id="app" :style="{ background: pageBackground }">
<div>
<mdb-btn color="primary" @click.native="modal = true"
>Launch demo modal</mdb-btn
>
<mdb-modal :show="modal" @close="modal = false">
<mdb-modal-header>
<mdb-modal-title>Modal title</mdb-modal-title>
</mdb-modal-header>
<mdb-modal-body>
<mdb-color-picker
:show="showPicker1"
@getValue="color1 = $event"
@close="showPicker1 = false"
>
<div class="mdb-cp-btn-wrapper">
<div
class="mdb-cp-btn"
:style="{ background: color1 }"
@click="showPicker1 = !showPicker1"
></div>
</div>
</mdb-color-picker>
</mdb-modal-body>
<mdb-modal-footer>
<mdb-btn color="secondary" @click="modal = false"
>Close</mdb-btn
>
<mdb-btn color="primary" @click="modal = false">Save changes</mdb-btn>
</mdb-modal-footer>
</mdb-modal>
</div>
</div>
</template>
<script>
import mdbColorPicker from 'mdb-color-picker'
import { mdbModal, mdbModalHeader, mdbModalFooter, mdbBtn, mdbModalBody, mdbModalTitle } from 'mdbvue'
export default {
components: {
mdbColorPicker,
mdbModal, mdbModalHeader, mdbModalFooter, mdbBtn, mdbModalBody, mdbModalTitle
},
data() {
return {
color1: '#ff0000ff',
pageBackground: '#ffffff',
showPicker1: false,
modal: false,
}
}
}
</script>
cavaon commented 4 years ago
Hi Magdalena, The code you provided has the same issue.
I am using Chrome Version 83.0.4103.61 (Official Build) (64-bit).
Magdalena Dembna staff premium commented 4 years ago
Can you confirm, that after commenting the color picker out everything works as expected? I will create a task to inspect this bug closer before one of the future releases. Best regards, Magdalena
cavaon commented 4 years ago
Yes, if I commenting the color picker out, then everything works as expected. When I inspecting events via the Vue Dev tools, its not showing that the modal be hided and showed again, so I think it might be kind of animation issue. But I cannot find a way to fix it.
cavaon commented 4 years ago
Yes, if I commenting the color picker out, then everything works as expected. When I inspecting events via the Vue Dev tools, its not showing that the modal be hided and showed again, so I think it might be kind of animation issue. But I cannot find a way to fix it.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: 6.7.1
- Device: Macbook/Surface
- Browser: Chrome
- OS: Mac/Windows
- Provided sample code: No
- Provided link: Yes