SCSS设置max-height导致React组件点击事件无法触发

使用React+Storybook开发组件库时，搜索栏的自动补全下拉框显示正常，但通过max-height实现动画时，选项的onClick事件无法触发。尝试过编程式控制但不想给Input新增props，寻求替代方案。

相关代码 #

组件渲染代码（Searchbar.tsx） #

const renderAutoCompleteOptions = () => {
    return (
      <div className={`${styles.autoCompleteOptions}`}>
        {filteredOptions.map((option: string, index: number) => (
          <div
            key={index}
            onClick={() => {
              setInputValue(option);
              onAutoCompleteSelect?.(option);
            }}
          >
            {option}
          </div>
        ))}
      </div>
    );
  };

SCSS样式代码 #

.searchbarContainer {
  display: flex;
  align-items: center;
  position: relative;
  border-radius: 4px;
  padding: 5px;
  background-color: white;
  gap: 5px;

  &:focus-within .autoCompleteOptions {
    visibility: visible;
    opacity: 1;
    max-height: 200px;
    transition: max-height 0.2s ease, opacity 0.1s ease, visibility 0s 0s;
  }

  .autoCompleteOptions {
    visibility: hidden;
    opacity: 0;
    max-height: 0;
    transition: max-height 0.2s ease, opacity 0.3s ease, visibility 0s 0.4s;
    position: absolute;
    top: 90%;
    left: 5px;
    right: 0;
    background-color: white;
    border: 2px solid #000;
    border-radius: 0 0 8px 8px;
    z-index: 2;
    overflow-y: auto;
  }
}

注：将max-height动画时长设为几秒时，点击事件可触发，但动画会变得极慢。

解决方案 #

问题根源：当max-height: 0时，元素实际可交互区域高度为0，overflow:auto会裁剪内容，导致点击事件无法命中选项；动画时长较短时，用户点击瞬间元素还未过渡到可交互的高度状态。

方法1：添加pointer-events控制（推荐） #

通过pointer-events属性在元素隐藏时禁用点击，显示时启用，同时保留原有动画效果：

.searchbarContainer {
  // 原有代码不变

  &:focus-within .autoCompleteOptions {
    visibility: visible;
    opacity: 1;
    max-height: 200px;
    pointer-events: auto; // 显示时启用点击交互
    transition: max-height 0.2s ease, opacity 0.1s ease, visibility 0s 0s;
  }

  .autoCompleteOptions {
    visibility: hidden;
    opacity: 0;
    max-height: 0;
    pointer-events: none; // 隐藏时禁用点击交互
    transition: max-height 0.2s ease, opacity 0.3s ease, visibility 0s 0.4s;
    // 原有代码不变
  }
}

方法2：调整max-height的过渡范围 #

将隐藏状态的max-height设为极小值（而非0），确保元素始终有可点击的高度区域，同时保持动画流畅：

.searchbarContainer {
  // 原有代码不变

  &:focus-within .autoCompleteOptions {
    max-height: 200px;
    // 原有代码不变
  }

  .autoCompleteOptions {
    max-height: 4px; // 替换原有的max-height: 0
    // 原有代码不变
  }
}

方法3：改用height + transform实现动画（更精准） #

如果max-height方案始终有问题，可改用固定height配合transform: translateY()实现下拉动画，避免裁剪问题：

.searchbarContainer {
  // 原有代码不变

  &:focus-within .autoCompleteOptions {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    height: auto;
    transition: transform 0.2s ease, opacity 0.1s ease, visibility 0s 0s;
  }

  .autoCompleteOptions {
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    height: 0;
    transition: transform 0.2s ease, opacity 0.3s ease, visibility 0s 0.4s;
    // 原有代码不变
  }
}

内容的提问来源于stack exchange，提问作者Siyabend Özdemir