😢真是一个bug改一天

心情很糟糕的一天，一个很小的bug改了一天，最后另辟蹊径解决了，但是不知道到底是什么原因导致的。

demo

其实就是很小的问题，选择器的下拉列表无法滚动，在pc端是没问题的，但是移动端就是滚动不了。怀疑是countryItem上没有冒泡触发父组件的touchmove事件，或者css高度，overflow，都检查了，让AI也排查了，最后都没有生效

import { allCountries } from "@/utils/country_data";
import styles from "./index.h5.module.scss";
import { useState, useMemo } from "react";

const Select = () => {
  const [showDropdown, setShowDropDown] = useState(false);

  return (
    <div className={styles.phoneInputWrapper}>
      <div
        className={styles.selectWrapper}
        onClick={() => setShowDropDown(!showDropdown)}
      ></div>
      <input className={styles.inputWrapper} type="text" />
      {showDropdown && (
        <div className={styles.dropdownWrapper}>
          {allCountries.map((item, index) => {
            return (
              <div key={item.iso2} className={styles.countryItem}>
                <div>{item.dialCode}</div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
};

export default Select;

.phoneInputWrapper {
  display: flex;
  width: 100%;
  height: 56px;
  gap: 16px;
  position: relative;
  .selectWrapper {
    width: 100px;
    padding: 0;
    border: 1px solid #cacaca;
    border-radius: 6px;
    background: var(--Surface-Subtle, #f6f7f9);
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .inputWrapper {
    position: relative;
    font-size: 14px;
    letter-spacing: 0.01rem;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-left: 16px;
    margin-left: 0;
    flex-grow: 1;

    border-radius: 6px;
    background: var(--Surface-Subtle, #f6f7f9);
    outline: none;
  }
  .dropdownWrapper {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 12px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    margin-top: 4px;
    border-radius: 6px;
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    z-index: 10;

    /* 针对WebKit浏览器的滚动条样式 */
    &::-webkit-scrollbar {
      width: 4px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.2);
      border-radius: 2px;
    }

    .countryItem {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 8px;
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
      -webkit-tap-highlight-color: transparent;
      transition: background-color 0.2s ease;
    }
  }
}

另辟蹊径

最后我只能监听父组件的touchStart,touchMove和touchEnd事件，然后手动设置父组件的scrollTop属性实现滚动。有没有移动端的大佬指导一下可能是什么原因