Color Picker is not compatible withe Modal


Topic: Color Picker is not compatible withe Modal

cavaon asked 4 years ago

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>

Magdalena Dembna staff premium answered 4 years ago

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>

Magdalena Dembna staff premium answered 4 years ago

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.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • 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