vue-color-kit
vue-color-kit copied to clipboard
@blur event not firing, when clicked/typed within the input fields
We were working on a graphic editor somewhat like Canva, and we rely upon this package a lot. We use blur event in vue to close the color-picker when someone clicks outside the modal. And as expected, it works fine just fine except in one single condition.
Issue
- If we click/type within the input fields (HEX and RGBA) and then click outside to close the modal, the blur event won't get triggered, unless we click within the modal somewhere else to regain the focus and then click outside to close it.
<ColorPicker
:color="color"
@changeColor="changeColor"
theme="dark"
class="colorpicker-box"
@blur="close"
:colors-default="[
'null',
'#FFFFFF',
'#FF1900',
'#F47365',
'#FFB243',
'#FFE623',
'#6EFF2A',
'#1BC7B1',
'#00BEFF',
'#2E81FF',
'#5D61FF',
'#FF89CF',
'#FC3CAD',
'#BF3DCE',
'#8E00A7',
'rgba(0,0,0,0)',
]"
/>
I am also facing the same issue.