title: Color picker component doesn't work in Vuetify modal the way it does on full page
body: <p>In my Vuejs app that uses Vuetify, I have one row that is comprised of a checkbox, text field, and custom color picker element (see <a href="https://stackoverflow.com/questions/56015338/prop-value-in-vuejs-child-component-not-available-to-bind-to-element-attribute">this SO question/answer</a> for more details). I'm attempting to use the exact same form setup in two places: a full page, and a <code>v-dialog</code> modal. The issue I'm having is that the selected value from the color picker is written back to the text field (via event) just fine in the full page, but it won't work when called from inside the modal. </p>
  
  <p>To demonstrate the issue, here is a <a href="https://monosnap.com/file/pW6fJ5XbuWwJzPJPKI9oZFFgnrnsRx" rel="nofollow noreferrer">video</a>, and <a href="https://codesandbox.io/s/color-picker-modal-s80dd" rel="nofollow noreferrer">here is a CodeSandbox</a> of the modal implementation. And for reference, here is the <code>ColorPickerButton</code> component.</p>
  
  <pre><code>&lt;template&gt;
      &lt;div ref="colorpicker" class="color-picker-outer" v-if="showPickerContainer"&gt;
        &lt;span class="color-picker-inner"
          v-bind:style="{ 'background-color': colorValue }"
          @click="togglePicker"&gt;&lt;/span&gt;
        &lt;chrome-picker :value="colors" @input="updateFromPicker" v-if="displayPicker" /&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { Chrome } from 'vue-color';
  
  export default {
    props: {
      fieldName: String,
      initColor: String,
      showPickerContainer: true,
    },
    components: {
      'chrome-picker': Chrome,
    },
    data() {
      return {
        colors: {
          hex: '#4A4A4A',
        },
        colorValue: this.initColor,
        displayPicker: false,
      };
    },
    methods: {
      setColor(color) {
        this.updateColors(color);
        this.colorValue = color;
      },
      updateColors(color) {
        if (color.slice(0, 1) === '#') {
          this.colors = {
            hex: color,
          };
        } else if (color.slice(0, 4) === 'rgba') {
          let rgba = color.replace(/^rgba?\(|\s+|\)$/g, '').split(','),
            hex = `#${((1 &lt;&lt; 24) + (parseInt(rgba[0]) &lt;&lt; 16) + (parseInt(rgba[1]) &lt;&lt; 8) + parseInt(rgba[2])).toString(16).slice(1)}`;
          this.colors = {
            hex,
            a: rgba[3],
          };
        }
      },
      showPicker() {
        document.addEventListener('click', this.documentClick);
        this.displayPicker = true;
      },
      hidePicker() {
        document.removeEventListener('click', this.documentClick);
        this.displayPicker = false;
      },
      togglePicker() {
        this.displayPicker ? this.hidePicker() : this.showPicker();
      },
      updateFromInput() {
        this.updateColors(this.colorValue);
      },
      updateFromPicker(color) {
        this.colors = color;
        if (color.rgba.a === 1) {
          this.colorValue = color.hex;
        } else {
          this.colorValue = `rgba(${color.rgba.r}, ${color.rgba.g}, ${color.rgba.b}, ${color.rgba.a})`;
        }
      },
      documentClick(e) {
        let el = this.$refs.colorpicker;
        let target = e.target;
          if (el &amp;&amp; target) {
          if (el !== target &amp;&amp; !el.contains(target)) {
            this.hidePicker();
          }
          this.$emit('update-color', this.colorValue, this.fieldName);
        }
      },
    },
    watch: {
      initColor(newVal, oldVal) {
        this.colorValue = newVal;
      },
    },
  };
  &lt;/script&gt;
  
  &lt;style scoped&gt;
    div.color-picker-outer {
      width: 30px;
      height: 30px;
      display: inline-block;
      background-color: #EEE;
      position: relative;
      top: 19px;
      outline: 3px solid #C9C9C9;
    }
  
    .color-picker-inner {
      width: 30px;
      height: 30px;
      position: relative;
      display: inline-block;
    }
  
    .vc-chrome {
      position: absolute;
      top: -3px;
    /*left: 55px; */
    /*bottom: 20px; */
      right: 33px;
      z-index: 9;
    }
  &lt;/style&gt;
  </code></pre>
  
  <p>I see two things going on (or not going on) with the CPB component in the modal:</p>
  
  <p>1) The <code>updateFromPicker</code> method is not being called when selecting a color, and therefore the <code>update-color</code> event is not emitted, so the color value is not written back to the text field.</p>
  
  <p>2) It is not possible to click anywhere outside of the color picker to close it in the modal (even within the modal boundary); you have to click on the color picker square to close it.</p>
  
  <p>I've been banging my head against this for a while, so if anyone could shed some light on this, I'd appreciate it.</p>