Antd Select与Menu组合使用

业务需求上需要实现一个类似于这样的组件

很像级联选择器Cascader的作用，但最后一层需要根据相应配置显示不同的状态，如下拉列表、输入框等，基本代码如下

import type { MenuProps } from 'antd'
import { Input, Menu, Select } from 'antd'
import React, { useState } from 'react'

const CustomCascader: React.FC = () => {
    const [open, SetOpen] = useState<boolean>(false)
    return (
        <Select
            open={open}
            onDropdownVisibleChange={(visible) => SetOpen(visible)} //由于select组件的下拉框与Menu弹出框并非一个组件，所以需要手动控制下拉框的打开状态
            style={{ width: '200px' }}
            dropdownRender={() => {
                return (
                    <Menu triggerSubMenuAction="click">
                        <Menu.Item>菜单项一</Menu.Item>
                        <Menu.Item>菜单项二</Menu.Item>
                        <Menu.SubMenu title="子菜单">
                            <Menu.Item>
                                {' '}
                                <Input />
                            </Menu.Item>
                        </Menu.SubMenu>
                        <Menu.SubMenu title="子菜单">
                            <Menu.SubMenu title="第二层">
                                <Menu.Item>
                                    {' '}
                                    <Input
                                        onClick={(e) => {
                                            e.stopPropagation() // 阻止冒泡，防止点击该元素触发父元素点击事件，Menu弹出框直接关闭
                                        }}
                                    />
                                </Menu.Item>
                            </Menu.SubMenu>
                        </Menu.SubMenu>
                        <Menu.SubMenu title="子菜单">
                            <Menu.SubMenu title="第三层">
                                <Menu.Item>1</Menu.Item>
                                <Menu.Item>2</Menu.Item>
                                <Menu.Item>3</Menu.Item>
                                <Menu.Item>4</Menu.Item>
                            </Menu.SubMenu>
                        </Menu.SubMenu>
                    </Menu>
                )
            }}
        />
    )
}

export default CustomCascader

以输入框为例，谈一下遇见的问题：

1.当triggerSubMenuAction为hover且输入时为中文输入法，中文字符选择框会使组件失焦，弹出框直接消失，这里需要把triggerSubMenuAction属性变为click可以解决该问题

2.由于select组件与menu本不是一个整体，所以第一层下拉框为select的open状态，第二三层为menu组件的open状态，容易出现这样的问题

解决办法为手动控制select的open状态（见代码注释）

这样处理menu和select弹出框的状态有时仍然不能同步，欢迎各位大佬来指点呀