focusとclickが同時に発生するのを制御したい

Question

純粋なJavascriptで表示/非表示する色見本パネルのようなものを作っています。
テキストボックスにフォーカスするとその下に色見本パネルが表示され、色をクリックするとテキストボックスに選んだ色のカラーコード(例: #ff0000)が入力され、パネルが非表示になるというものです。

基本的な動作はできているのですが、パネル以外の場所をクリックした場合はパネルを非表示にするという処理を加えたとき、focus と click が同時に発生し、パネルが表示されてすぐに非表示になるという状態になってしまいました。

領域外をクリックした際の処理はこちらです。panel にクラス active がついている場合は表示状態です。

    var self = this;
    document.addEventListener('click', function(event){
        if(self.panel.classList.contains('active')){
            if( ! self.panel.contains(event.target)){
                self.hidePanel();    // パネルを隠す
            }
        }
    });

フォーカスイベントがこちらです。

    // element は input[type=text] のオブジェクトです
    element.addEventListener('focus', function(event){
        self.showPanel(this);    // パネルを表示
    });

色見本(<li>)のクリック

        li.addEventListener('click', function(){
            // focusedElement はフォーカスされた input[type="text"] です
            if(self.focusedElement){
                self.focusedElement.value = this.getAttribute('data-color');
                self.hidePanel();
            }
        });

focus すると色見本は表示されるのですがパネルの領域外をクリックしたときの処理も同時に発生してしまうためすぐに閉じられてしまいます。

このような場合どのようにして回避すればいいのでしょうか？

---

追記

パネルのHTMLは動的に生成されますが基本的に次のようになっています。
普段はdisplay: none; で .palette-panel.active のとき表示されます。

<div class="palette-panel">
  <ul>
    <li data-color="#ff0000"></li>
    <li data-color="#00ff00"></li>
    <li data-color="#0000ff"></li>
  </ul>
</div>

Comments

[yambejp]

HTMLの部分の記述もあると良いかと思います

[workr]

HTMLを追記しました。よろしくお願いします。

Answer 1

とりあえずjQueryで書いてみましたが、動作としてはこういうことでしょうか？

.palette-panel {width:110px;height:40px;border:1px solid #000000;position:fixed;background-Color:#ffffff;}
.palette-panel ul{display:inline;}
.palette-panel li{display:block;width:20px;height:20px;border:1px solid #000000; float:left;margin-left:10px;;margin-top:10px;}
[data-color="#ff0000"]{background-Color:#ff0000}
[data-color="#00ff00"]{background-Color:#00ff00}
[data-color="#0000ff"]{background-Color:#0000ff}

$(function(){
  $('.palette-panel').hide();
  $('input').on({
    'focus':function(){$(this).next("div").slideDown();},
    'blur':function(){ $(this).next("div").slideUp();},
  });
  $('li[data-color]').on('click',function(e){
    $(this).closest("div").prev("input").val($(this).data("color")).end().slideUp();
  });
});

<div>
<input type="text">
<div class="palette-panel">
  <ul>
    <li data-color="#ff0000"></li>
    <li data-color="#00ff00"></li>
    <li data-color="#0000ff"></li>
  </ul>
</div>
</div>
<div>
<input type="text">
<div class="palette-panel">
  <ul>
    <li data-color="#ff0000"></li>
    <li data-color="#00ff00"></li>
    <li data-color="#0000ff"></li>
  </ul>
</div>
</div>
<div>
<input type="text">
<div class="palette-panel">
  <ul>
    <li data-color="#ff0000"></li>
    <li data-color="#00ff00"></li>
    <li data-color="#0000ff"></li>
  </ul>
</div>
</div>

Answer 2

例えばfocusイベントの中でsetTimeoutして処理を遅延させる、などはどうでしょう？

var isFocused = false;

// element は input[type=text] のオブジェクトです
element.addEventListener('focus', function(event){
  isFocused = true;
  window.setTimeout(function(){
    if(!isFocused) return;
    self.showPanel(this);    // パネルを表示
    isFocused = false;
  }, 20);
});

li.addEventListener('click', function(){
  isFocused = false;
  // focusedElement はフォーカスされた input[type="text"] です
  if(self.focusedElement){
    self.focusedElement.value = this.getAttribute('data-color');
    self.hidePanel();
  }
});