Input text field in custom colorpicker template does not allow click/input interactions

[natatat]

I'm trying to add an input field to the colorpicker template itself, but I can't interact with the input when I do.

    $('.color').colorpicker({
        template: '<div class="colorpicker dropdown-menu">' +
          '<div class="colorpicker-saturation"><i><b></b></i></div>' +
          '<div class="colorpicker-hue"><i></i></div>' +
          '<div class="colorpicker-color"><div /></div>' +
          '<input class="hex-input" type="text">' +
          '</div>'
    });

link to fiddle here

[itsjavi]

hi @natatat it seems a problem with the mousedown event, that's applied to the entire colorpicker. As a temporary workaround, try to focus the input when clicked/tapped via events like:

$('.hex-input').on('click touchstart mousedown', function(){$(this).focus()})

cheers