JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap-vue@2.0.4/dist/bootstrap-vue.css">
<script src="//unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<script src="//unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@2.0.4/dist/bootstrap-vue.js"></script>
<div id="app">
  <div>
    <b-dd text="Dropdown" @hide="onHide">
      <b-dd-form>
        <b-form-group label="Color" label-for="dropdown-form-color">
          <b-input v-model="color"
                        id="dropdown-form-color"
                        type="color" @focus="onPickingColor">
          </b-input>
        </b-form-group>
      </b-dd-form>
    </b-dd>
    selected color: {{ color }}
  </div>
</div>

CSS

body { padding: 1rem; }

JavaScript

window.onload = () => {
  new Vue({
    el: '#app',
    data() {
      return {
        color: '#ff0000',
        isPickingColor: false
      }
    },
    methods: {
    	onPickingColor() {
      	this.isPickingColor = !this.isPickingColor;
      },
      onHide(evt) {
      	if(this.isPickingColor){
        	evt.preventDefault()
        }
      }
    }
  })
}