如何让Tailwind CSS中输入框关联的div点击内部链接时保持可见？

问题 #

当前实现中，输入框获得焦点时链接可正常显示，但点击链接时焦点立即转移，div随之消失。请问如何让该div的visible状态在点击链接时保持？

<div class="group p-8">
  <input type="text" class="peer bg-white w-full px-4 py-2 border-2 border-gray-200">
  <div class="group-focus-within:visible invisible relative">
    <ul class="max-h-40 w-full absolute z-50 bg-gray-50 border-2 border-gray-200 rounded divide-y-2 divide-gray-100 overflow-y-scroll shadow-lg px-4 py-2 -mt-px">
      <li class="py-2">
        <a href="#">Link 1</a>
      </li>
      <li class="py-2">
        <a href="#">Link 2</a>
      </li>
      <li class="py-2">
        <a href="#">Link 3</a>
      </li>
      <li class="py-2">
        <a href="#">Link 4</a>
      </li>
      <li class="py-2">
        <a href="#">Link 5</a>
      </li>
    </ul>
  </div>
</div>

解决方案 #

问题根源是点击链接时，焦点会离开group容器，导致group-focus-within触发的可见性样式失效。以下是两种可行的解决方法：

方法一：CSS hover增强 #

直接给下拉容器添加group-hover:visible类，利用鼠标悬停状态维持显示，确保点击链接时容器不会立刻消失：

<div class="group p-8">
  <input type="text" class="peer bg-white w-full px-4 py-2 border-2 border-gray-200">
  <div class="group-focus-within:visible group-hover:visible invisible relative">
    <ul class="max-h-40 w-full absolute z-50 bg-gray-50 border-2 border-gray-200 rounded divide-y-2 divide-gray-100 overflow-y-scroll shadow-lg px-4 py-2 -mt-px">
      <li class="py-2">
        <a href="#">Link 1</a>
      </li>
      <li class="py-2">
        <a href="#">Link 2</a>
      </li>
      <li class="py-2">
        <a href="#">Link 3</a>
      </li>
      <li class="py-2">
        <a href="#">Link 4</a>
      </li>
      <li class="py-2">
        <a href="#">Link 5</a>
      </li>
    </ul>
  </div>
</div>

原理：当鼠标悬停在group容器内时，group-hover:visible会让下拉框保持可见，点击链接过程中鼠标始终在容器范围内，不会因为输入框失焦而立刻隐藏。

方法二：JavaScript精准控制 #

通过JS监听输入框的焦点状态，配合延迟隐藏逻辑，给点击链接留足时间：

<div class="group p-8" id="searchContainer">
  <input type="text" class="peer bg-white w-full px-4 py-2 border-2 border-gray-200" id="searchInput">
  <div class="invisible relative" id="dropdownMenu">
    <ul class="max-h-40 w-full absolute z-50 bg-gray-50 border-2 border-gray-200 rounded divide-y-2 divide-gray-100 overflow-y-scroll shadow-lg px-4 py-2 -mt-px">
      <li class="py-2">
        <a href="#">Link 1</a>
      </li>
      <li class="py-2">
        <a href="#">Link 2</a>
      </li>
      <li class="py-2">
        <a href="#">Link 3</a>
      </li>
      <li class="py-2">
        <a href="#">Link 4</a>
      </li>
      <li class="py-2">
        <a href="#">Link 5</a>
      </li>
    </ul>
  </div>
</div>
<script>
const input = document.getElementById('searchInput');
const dropdown = document.getElementById('dropdownMenu');
let blurTimer;

// 输入框聚焦时显示下拉框
input.addEventListener('focus', () => {
  clearTimeout(blurTimer);
  dropdown.classList.add('visible');
});

// 输入框失焦时延迟隐藏
input.addEventListener('blur', () => {
  blurTimer = setTimeout(() => {
    dropdown.classList.remove('visible');
  }, 200);
});

// 点击下拉框内元素时清除延迟，避免误隐藏
dropdown.addEventListener('mousedown', () => {
  clearTimeout(blurTimer);
});
</script>

原理：输入框失焦时不立刻隐藏下拉框，而是设置一个短延迟；如果用户点击了下拉框内的链接，会触发mousedown事件清除延迟，确保点击动作完成后再隐藏。

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