Bootstrap 4 Popover内输入框无法编辑（自动失焦）问题求助

我正在使用Bootstrap 4及Bootstrap colorpicker开发一个带输入框的弹窗式颜色选择器，用于设置颜色代码。但打开Popover后，#color-value输入框无法编辑，调试发现它一获取焦点就立刻失焦（日志中'focus'与'focusout'连续出现）。研究表明这与Bootstrap有关，但我未找到可行的解决办法，恳请提供解决方案或变通方案。

已尝试的解决方法 #

• 解绑该输入框的所有focus、focusout、blur等事件处理器
• 组合使用preventDefault()和stopPropagation()阻止事件传播
• 尝试开启/关闭colorpicker的container配置项

相关代码 #

HTML #

<div class="tag col-md-4" data-tag-id="1">
    <div class="form-group input-group colorpicker-container">
        <input name="section-1-tag-1" type="text" class="form-control language-field" placeholder="Tag">
        <div class="input-group-append"><input name="section-1-tag-1-border-color" type="text" class="form-control language-field border-color no-auto-show colorpicker-element" ><a class="btn btn-icon btn-sm btn-show-colorpicker"><i class="far fa-droplet"></i></a><a class="btn btn-small btn-round btn-icon btn-danger btn-delete-tag" data-button-initiated="true"><i class="now-ui-icons ui-1_simple-remove"></i></a><a class="btn btn-icon btn-sm btn-reset-color"><i class="far fa-refresh"></i></a></div>
    </div>
</div>

JS #

var color = false;
if($('.border-color').val()) {
    color = $('.border-color').val();
}
$('.border-color').colorpicker(
    {
        //container: true, // tried turning this off and on, no success
        useAlpha: true,
        format: "rgba",
        popover: {
            placement: 'top'
        },
        color: color,
        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="colorpicker-bar has-input">' +
          '   <div class="input-group">' +
          '       <input type="text" id="color-value" class="form-control input-block color-io" />' +
          "   </div>" +
          "</div>" +
          "</div>"
      }
).on("colorpickerShow", function (e) {
    console.log('colorpickerShow');
    var element = e.colorpicker.element;
    var io = $('#' + element.attr('aria-describedby') + ' #color-value');
    var defaultColor = e.color.string();
    if(element.val()) {
        e.colorpicker.setValue(element.val());
        $(element).siblings(".btn-show-colorpicker").find("i").css("color", element.val());
        $(element).siblings(".btn-reset-color").show();
        io.val(element.val());
    } else {
        $(element).siblings(".btn-reset-color").hide();
    }
    
    io.on('focus keydown mousedown active', function(e) {
        e.stopPropagation();
        e.preventDefault();
        console.log(e);
        console.log('focus');
    });
    io.on('focusout blur', function() {
        e.stopPropagation();
        //e.preventDefault();
        console.log(e);
        console.log('focusout');
    });
    element.on("change keyup", function () {
      e.colorpicker.setValue(element.val());
      $(element).siblings(".btn-reset-color").show();
    });
    io.on("change", function () {
        e.colorpicker.setValue(io.val());
        if($(this).val()) {
            e.colorpicker.setValue('');
            $(element).siblings(".btn-reset-color").hide();
        } else {
            e.colorpicker.setValue($(this).val());
            $(element).siblings(".btn-reset-color").show();
        }   
    });
})

Popover实际HTML结构 #

<div class="popover colorpicker-bs-popover fade show bs-popover-bottom" role="tooltip" id="popover467222" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(268px, 159px, 0px);" x-placement="bottom">
  <div class="arrow" style="left: 84px;"></div>
  <h3 class="popover-header"></h3>
  <div class="popover-body">
    <div class="colorpicker colorpicker-with-alpha colorpicker-popup colorpicker-bs-popover-content colorpicker-visible">
      <div class="colorpicker-saturation" style="background-color: rgb(255, 0, 0);"><i class="colorpicker-guide" style="top: 42px; left: 35px;"></i></div>
      <div class="colorpicker-hue"><i class="colorpicker-guide" style="top: 126px;"></i></div>
      <div class="colorpicker-alpha">
        <div class="colorpicker-alpha-color" style="background: linear-gradient(rgb(170, 123, 123) 0%, transparent 100%);"></div>
        <i class="colorpicker-guide" style="top: 0px;"></i></div>
      <div class="colorpicker-bar has-input">
        <div class="input-group">
          <input type="text" id="color-value" class="form-control input-block color-io">
        </div>
      </div>
      <div class="colorpicker-bar colorpicker-preview">
        <div style="background-color: rgb(170, 123, 123); color: black;">rgb(170, 123, 123)</div>
      </div>
    </div>
  </div>
</div>

可运行代码片段 #

JavaScript #

$(document).ready(function() {
  var color = false;
  if($('.border-color').val()) {
      color = $('.border-color').val();
  }
  $('.border-color').colorpicker(
      {
          //container: true, // tried turning this off and on, no success
          useAlpha: true,
          format: "rgba",
          popover: {
              placement: 'top'
          },
          color: color,
          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="colorpicker-bar has-input">' +
            '   <div class="input-group">' +
            '       <input type="text" id="color-value" class="form-control input-block color-io" />' +
            "   </div>" +
            "</div>" +
            "</div>"
        }
  ).on("colorpickerShow", function (e) {
      console.log('colorpickerShow');
      var element = e.colorpicker.element;
      var io = $('#' + element.attr('aria-describedby') + ' #color-value');
      var defaultColor = e.color.string();
      if(element.val()) {
          e.colorpicker.setValue(element.val());
          $(element).siblings(".btn-show-colorpicker").find("i").css("color", element.val());
          $(element).siblings(".btn-reset-color").show();
          io.val(element.val());
      } else {
          $(element).siblings(".btn-reset-color").hide();
      }

      io.on('focus keydown mousedown active', function(e) {
          e.stopPropagation();
          e.preventDefault();
          console.log(e);
          console.log('focus');
      });
      io.on('focusout blur', function() {
          e.stopPropagation();
          //e.preventDefault();
          console.log(e);
          console.log('focusout');
      });
      element.on("change keyup", function () {
        e.colorpicker.setValue(element.val());
        $(element).siblings(".btn-reset-color").show();
      });
      io.on("change", function () {
          e.colorpicker.setValue(io.val());
          if($(this).val()) {
              e.colorpicker.setValue('');
              $(element).siblings(".btn-reset-color").hide();
          } else {
              e.colorpicker.setValue($(this).val());
              $(element).siblings(".btn-reset-color").show();
          }   
      });
  });
});

CSS #

body {
  padding: 50px;
  min-height: 500px;
 }
 .colorpicker-container .input-group-append .colorpicker-element {
  position: absolute;
  left: 0;
  top: 0;
  right: auto;
  bottom: 0;
  width: 30px;
  height: 100%;
  opacity: 0;
  z-index: 3;
  cursor: pointer;
  padding: 0;
}

HTML #

<!doctype html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script src="https://youreka-virtualtours.be/dashboard/assets/js/core/popper.min.js"></script>
  <script src="https://youreka-virtualtours.be/dashboard/assets/js/core/bootstrap.min.js"></script>
  <script src="https://youreka-virtualtours.be/dashboard/assets/js/plugins/jquery.bootstrap-wizard.js"></script>
  <script src="https://youreka-virtualtours.be/dashboard/assets/js/now-ui-dashboard.js"></script>
  <link href="https://youreka-virtualtours.be/dashboard/assets/css/now-ui-dashboard.css" rel="stylesheet"/>
  <link href="https://youreka-virtualtours.be/dashboard/assets/css/bootstrap.min.css" rel="stylesheet"/>
  <link href="https://youreka-virtualtours.be/libraries/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css" rel="stylesheet"/>
  <script src="https://youreka-virtualtours.be/libraries/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js"></script>
  <script src="https://kit.fontawesome.com/eecbfb86a5.js" crossorigin="anonymous"></script>
  <meta charset="utf-8">
  <title>test</title>
</head>

<body>
  <div class="tag col-md-4" data-tag-id="1">
    <div class="form-group input-group colorpicker-container">
        <input name="section-1-tag-1" type="text" class="form-control language-field" placeholder="Tag">
        <div class="input-group-append"><input name="section-1-tag-1-border-color" type="text" class="form-control language-field border-color no-auto-show" ><a class="btn btn-icon btn-sm btn-show-colorpicker"><i class="far fa-droplet"></i></a><a class="btn btn-small btn-round btn-icon btn-danger btn-delete-tag" data-button-initiated="true"><i class="now-ui-icons ui-1_simple-remove"></i></a><a class="btn btn-icon btn-sm btn-reset-color"><i class="far fa-refresh"></i></a></div>
    </div>
  </div>
</body>
</html>

内容的提问来源于stack exchange，提问作者Mats Raemen