无法在移动屏幕中单击/选择下拉选项，使用反应选择下拉菜单

Question

我正在使用反应选择下拉菜单，它在桌面模式下选择/取消选择选项时效果很好，但是一旦我切换到响应式屏幕，选项就可见，但当我尝试单击下拉菜单/尝试选择一个选项时，它会关闭，我'我无法选择（ps：hideSelectedOptions = {false}和closeMenuOnSelect = {false} - 它在桌面上工作正常，但在响应屏幕上有问题）

Answer 1

不确定这对您来说是否仍然是一个问题，但我也遇到过这个问题。对于上下文，我将反应选择下拉列表嵌入到反应日期选择器的自定义标头组件中。下拉菜单控制年份和月份的选择。

在桌面上一切正常，但在移动/响应式屏幕上我遇到了与您在此处描述的完全相同的问题。

我经常使用门户来进行反应选择下拉菜单：

menuPortalTarget={document.body}

这似乎是问题的主要原因，因为一旦删除它，我可以选择选项，但我遇到了 UI 问题。

所以我的解决方案是在这里使用react-device-detect。

menuPortalTarget={isMobile ? null : document.body}

为了解决 UI 问题，我只需将

position: absolute;

添加到反应选择菜单容器中。

现在一切似乎都按预期进行，因此希望这可以帮助任何遇到类似问题的人。

Answer 2

我在使用

menuPortalTarget={document.querySelector('body')}

道具时遇到了类似的问题。

为了在不删除

menuPortalTarget

属性的情况下解决此问题，我传递了一个自定义

Option

组件，我在其中捕获了触摸事件并阻止其传播：

import ReactSelect, { components } from 'react-select'

<ReactSelect
  ...
  components={{
    Option: ({ children, ...props }) => (
      <components.Option {...props}>
        <div onTouchStart={(e) => e.stopPropagation()}>
          {children}
        </div>
      </components.Option>
    ),
  }}
/>