当下拉图标被“覆盖”并使用 onMenuOpen+onMenuClose 时，react-select 在移动设备中表现不佳

Question

我在我的网络应用程序中使用react-select 进行值输入。我必须根据设计覆盖下拉指示器图标，并且必须根据菜单的打开/关闭状态执行一些动态修改。我正在使用样式组件，并且我已经简化了一些代码，将在此处呈现：

const DropdownIndicator = (props) => {
  return (
    <components.DropdownIndicator {...props}>
    </components.DropdownIndicator>
  );
};

<S.InputField
  disabled={disabled}
  labelLeft={labelLeft}
  noLabel={!label}
  className={className}
  fieldType={state?.type}
  inputType={state?.inputType}
  notClearable={notClearable}
  extendOnOpen={extendOnOpen && menuIsOpen}
  menuIsOpen={menuIsOpen}
  menuHeight={menuHeight}
>
  <label htmlFor={id}>{label}</label>

  <div className="input-wrapper">
    <Select
      id={id}
      placeholder={'test'}
      components={{ DropdownIndicator }}
      // menuIsOpen={menuIsOpen}
      onMenuOpen={() => {
        console.log('menu opened');
        setMenuIsOpen(() => true);
      }}
      onMenuClose={() => {
        console.log('menu closed');
        setTimeout(() => setMenuIsOpen(() => false), 3000);
      }}
    />
  </div>
</S.InputField>

现在，当我尝试单击“选择”的控制字段打开菜单时，菜单会按预期打开，但是当我想单击下拉图标打开它时，操作变得很难预测 - 基本上我得到了“菜单打开”然后“菜单关闭”，因此菜单不会保持打开状态。为什么会这样呢？这是react-select设计中的一个bug吗？

有趣的是，如果我评论

components={{ DropdownIndicator }}

或

onMenuOpen

或

onMenuClosed

之一，菜单会按预期打开/关闭，但绝不会同时出现（“覆盖”

DropdownIndicator

和

onMenuOpen

/

onMenuClosed） 

）已受雇。我将“覆盖”放在引号中，因为它在技术上并未被覆盖（我已从

<components.DropdownIndicator {...props}></components.DropdownIndicator>

中删除了图标更改，因为它不会影响结果），它实际上模仿（据我所知）react-的默认行为选择的菜单流程。

重要！它仅发生在移动分辨率中。桌面资源工作得很好。所以我的理解这与 onFocus/onBlur 以及它们在触摸设备中的处理方式有关。

有什么想法吗？

Answer 1

我有类似的设置并遇到了同样的问题。我可以使用 CSS 属性

pointer-event: none

作为解决方法。当我使用 Tailwind CSS 时，我添加了类

pointer-events-none

。见下图：

const DropdownIndicator = (props) => {
  return (
    <components.DropdownIndicator {...props} className="pointer-events-none">
    </components.DropdownIndicator>
  );
};