itsjavi / bootstrap-colorpicker

Bootstrap Colorpicker is a modular color picker plugin for Bootstrap.
https://itsjavi.com/bootstrap-colorpicker/
MIT License
1.38k stars 367 forks source link

Focus problem of colorpicker in the modal dialog of jquery #311

Closed penghzhang closed 4 years ago

penghzhang commented 4 years ago

Hi, I used jquery dialog to create a modal dialog, then I append a span in the dialog. Then I create an colorpicker(Code will be attached below ) on the span, when I click the span, the colorpicker is shown. But when I choose a item in swatches and click Apply button, I found the there are two focus events are triggered, the first is for the span, the second is for the Apply button. which confused me. Why the span is focused firsly? colorSpan .colorpicker({ color: value, format: 'hex', template: '<div class="colorpicker">' + '<div class="colorpicker-saturation"><i class="colorpicker-guide"></i></div>' + '<div class="colorpicker-hue"><i class="colorpicker-guide"></i></div>' + '<div class="colorpicker-alpha">' + ' <div class="colorpicker-alpha-color"></div>' + ' <i class="colorpicker-guide"></i>' + '</div>' + ' <div class="input-group">' + ' <div style="height: 30px; font-size:8pt; padding-top: 50px;margin-left: 50px">' + ' <button id="colorpicker-cancelBtn" class="btn-primary btn-danger" style="float left; font-size:8pt">Cancel</button>' + ' <button id="colorpicker-applyBtn" class="btn-primary btn-success" style="float left;font-size:8pt">Apply</button>' + ' </div>' + ' </div>' + '</div>', popover: { title: 'Color Picker', }, extensions: [ { name: 'swatches', // extension name to load options: { // extension options colors: { black: '#000000', white: '#ffffff', gray: '#888888', deepRed: '#880015', red: '#ed1c24', orange: '#ff7f27', yellow: '#fff200', green: '#22b14c', blue: '#3f48cc', purple: '#a349a4', success: '#5cb85c', info: '#5bc0de', warning: '#f0ad4e', danger: '#d9534f', }, namesAsValues: false, }, }, ], })

itsjavi commented 4 years ago

sorry, closing because the issue is incomplete and the issue template was completely discarded and not filled.