Search code examples
javascripthtmlcsscolor-picker

HTML5 Color Input Won't Open

I'm working on a web application that involves using canvases as a shared whiteboard between people. I have an HTML5 color input on a menu that becomes visible when hovering over the whiteboard so that the user can change the color of the drawing tool.

My issue is that during testing, the color picker won't open the majority of the time. I have two tabs open both with instances of the whiteboard to test. The color picker will only open on the first instance of the page I have open.

On the second page, when I click on the color picker it refuses to open. It shows the click animation on the button but the browser's color picker dialog doesn't open. Also, if I refresh the first instance of the page, the color picker stops working there as well. The only way I can get it to work again is if I completely close both tabs and reopen one.

I've tried and confirmed that this happens in both Chrome and Firefox which makes me think it's an issue with the HTML. This is a snippet of HTML that surrounds the color picker.

<a href="#button-draw" id="drawing-tool" title="Drawing Tool" data-toggle="remote-whiteboard" data-toggle-2="min" style="display:none;">
   <div class="drawing-tool-menu" style="display:none;">
       <input id="color-draw" type="color"/>
   </div>
   <span class="fa fa-pencil fa-2x"></span>
</a>

The anchor is a button in a hovering toolbar for selecting a marker and when the mouse hovers over that button, the color picker appears above it so you can select the color.

Here is a picture of the menu hovering over the whiteboard with the color selector visible.

Whiteboard Menu

I've tried to be detailed here and put down the relevant info. I'm not sure what information may be valuable to help solve the problem. I'm also not sure whether it's a problem with the browser or my code. I can add some of the javascript I use to display the menus, more HTML, or CSS if it would help.

Edit 1:

Javascript Code

I use this code to detect changes in the color

 $("#color-draw").off();
    $("#color-draw").change(function (e) {
        drawingClass.currentColor = $(this).val();
});

In order to show/hide the menus I use this.

var menuCloseTimer = {};

$(".whiteboard-toolbar a").off();
$(".whiteboard-toolbar a").mouseenter(function (e) {
    var item = $(this).attr("id")
    var key = $(this).attr("data-toggle");
    $(".video-toolbar[data-toggle='" + key + "']").show();
    $(".whiteboard-toolbar[data-toggle='" + key + "']").show();
    $(this).children(".drawing-tool-menu").show();
    clearTimeout(menuCloseTimer[item])
});
$(".whiteboard-toolbar a").mouseleave(function (e) {
    var menu = $(this)
    var item = $(this).attr("id")
    var key = $(this).attr("data-toggle");
    $(".video-toolbar[data-toggle='" + key + "']").hide();

    menuCloseTimer[item] = setTimeout(function () {
        menu.children(".drawing-tool-menu").hide();
    }, 500);
});

Edit 2:

I discovered something. On the first load when I click on the color picker it opens but on subsequent loads, it triggers the handler for anchor instead. I'm not sure why though.

Solution

  • I wrote the HTML intending to make the popup menu show up relative to the anchor button. But, the input element being inside of the anchor is causing the issue. After the first load, clicking the color input triggers the anchor instead of bringing up the color window.

    I don't know why the color picker works on the first load but I'm fairly sure this is what is causing the issue. I did some research and found that you aren't supposed to put buttons inside of anchors and this is basically that.

    I moved the color input out of the anchor and it worked perfectly.

    It's frustrating that there isn't any documentation about this issue or errors thrown by the browser.

    Edit 1

    In order to fix the issue I changed my code to:

    <div style="display:inline-block;position:relative">
    <a href="#button-draw" id="drawing-tool" title="Drawing Tool" data-toggle="remote-whiteboard" data-toggle-2="min">
        <span class="fa fa-pencil fa-2x"></span>
    </a>
    <div class="drawing-tool-menu" id="drawing-tool" data-toggle="remote-whiteboard" style="display:none;">
        <input id="color-draw" type="color" />
    </div>
</div>

    That way the input is separated from the anchor but is still placed relative to it.