[JavaScript]カラーピッカーがダブルクリックじゃないと正常に開かない

前提・実現したいこと

お世話になっております。
下記のカラーピッカーを使用しているのですが、
ダブルクリックをしないとカラーピッカーが表示されません。
※1回クリックだと、一瞬表示されて消えます。
1回クリックで一瞬表示されて消える不具合を直したいです。

どなたかわかる方、よろしくお願い致します。

＜使用カラーピッカー＞

HTML
1<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>
2<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.es5.min.js"></script>

試したこと

・試しにuseAsButton: trueの位置を変えてみたりしましたが、変わらず…。

HTML
1<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>
2<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.es5.min.js"></script>
3
4<div class="change">
5  <div class="change-list">
6    <span class="border 01"><img src="img/icon-01.png" class="i01"></span>
7  </div>
8  <div class="default">デフォルトに戻す</div>
9</div>

JavaScript
1$(function () {
2  try {
3    var iconColor = JSON.parse(localStorage.getItem('iconColor'));
4    $('img.i01').css('background-color', iconColor.i01);
5  } catch (e) {
6    console.log(e);
7  }
8  $(document).click(function(event) {
9  // event.targetをjQueryオブジェクトに変換する
10  // closest()を使って自分から先祖要素までinnerクラスがある要素を選択する
11  if(!$(event.target).closest('span').length && !$(event.target).closest('.pcr-app').length) {
12    $('img').css('border','none');
13  }
14});
15  $(document).on('tap', 'span', function (e) {
16    var targetClass = $(this).attr('class').substring(7, 10);
17    var targetImg = $(this).children();
18    var spanElm = $(this);
19    $('img').css('border','none');
20    $(targetImg).css('border','5px solid #ccc');
21    var originallyColor = $(targetImg).css('background-color');
22    function toHEXA(originallyColor) {
23      return "#" + originallyColor.match(/\d+/g).map(function (a) { return ("0" + parseInt(a).toString(16)).slice(-2) }).join("");
24    }
25    const pickr = Pickr.create({
26      el: '.' + targetClass,
27      default: toHEXA(originallyColor),
28      theme: 'classic',
29      useAsButton: true, //画像クリックでピッカーを開く
30      components: {
31        // Main components
32        preview: true,
33        hue: true,
34        // Input / output Options
35        lockOpacity: true
36      }
37    });
38    pickr.show();
39    pickr.on('change', (color, source, instance) => {
40      $(targetImg).css('background-color', color.toHEXA());
41    });
42
43  });
44  $('.default').on('tap', function () {
45    $('img.i01').css('background-color', '#FACCCE');
46  });
47});
48
49$(document).on('click', '.back-button', function () {
50  var iconColor = {
51    'i01': $('img.i01').css('background-color')
52  }
53  localStorage.setItem('iconColor', JSON.stringify(iconColor));
54});
55