bee-complex-grid 组件筛选框瞬间关闭的问题

[xqk1]

环境及版本信息

• tinper-bee 版本号: 2.4.0

• 若使用单个组件，请标明该组件版本号：[email protected]

• 当前项目中react的版本号：17.0.1

• 所使用的操作系统：Mac

• 所使用的浏览器：Chrome 87.0.4280.88

您所在的部门或项目名称：用友金融

描述这个问题:

1、组件相关代码

/**
 * @title 高级表格的基础应用(基本示例1)
 * @description 多选、合计、分页、列拖拽、列过滤
 *
 */
import React, { Component } from "react";
import  Grid from "bee-complex-grid";

function fmoney(s, n) {
  n = n > 0 && n <= 20 ? n : 2;
  s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
  let l = s.split(".")[0].split("").reverse(), r = s.split(".")[1];
  let t = "";
  for (let i = 0; i < l.length; i++) {
  t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
  }
  return t.split("").reverse().join("") + "." + r;
  }
  
const column = [
  {
    title: "序号",
    dataIndex: "index",
    key: "index",
    width: 100
  },
  {
    title: "订单编号",
    dataIndex: "orderCode",
    key: "orderCode",
    width: 150
  },
  {
    title: "金额",
    dataIndex: "money",
    key: "money",
    width: 160,
    textAlign:'right',
    sumCol: true,
    render(text, record, index) {
       let money = fmoney(text,2);
       return (<span>{money}</span>)
    }
  },
  {
    title: "类型",
    dataIndex: "type_name",
    key: "type_name",
    width: 100
  },
  {
    title: "采购组织",
    dataIndex: "purchasing",
    key: "purchasing",
    width: 150
  },
  {
    title: "采购组",
    dataIndex: "purchasingGroup",
    key: "purchasingGroup",
    width: 300
  },
  {
    title: "凭证日期",
    dataIndex: "voucherDate",
    key: "voucherDate",
    width: 150
  },
  {
    title: "审批状态",
    dataIndex: "approvalState_name",
    key: "approvalState_name",
    width: 150
  },
  {
    title: "确认状态",
    dataIndex: "confirmState_name",
    key: "confirmState_name",
    width: 500
  },
  {
    title: "关闭状态",
    dataIndex: "closeState_name",
    key: "closeState_name",
    width: 150
  }
];
const dataList = [
  {
    index: 1,
    orderCode: "2343",
    supplierName: "xxx",
    type_name: "123",
    purchasing: "内行",
    purchasingGroup: "323",
    voucherDate: "kkkk",
    approvalState_name: "vvvv",
    confirmState_name: "aaaa",
    closeState_name: "vnnnnn",
    money:'1232.56',
    d: "操作",
    key: "1"
  },
  {
    index: 2,
    _checked: true,
    orderCode: "222",
    supplierName: "22xxx",
    type_name: "1223",
    purchasing: "内行2",
    purchasingGroup: "3223",
    voucherDate: "222kk",
    approvalState_name: "22vvvv",
    confirmState_name: "2aaaa",
    closeState_name: "2vnnnnn",
    money:'2341232.56',
    d: "2操作",
    key: "2"
  },
  {
    index: 3,
    orderCode: "222",
    supplierName: "22xxx",
    _disabled: true,
    type_name: "1223",
    purchasing: "内行2",
    purchasingGroup: "3223",
    voucherDate: "222kk",
    approvalState_name: "22vvvv",
    confirmState_name: "2aaaa",
    closeState_name: "2vnnnnn",
    money:'122368732.56',
    d: "3操作",
    key: "3"
  },
  {
    index: 4,
    orderCode: "222",
    supplierName: "22xxx",
    type_name: "1223",
    purchasing: "内行2",
    purchasingGroup: "3223",
    voucherDate: "222kk",
    approvalState_name: "22vvvv",
    confirmState_name: "2aaaa",
    closeState_name: "2vnnnnn",
    money:'18765232.56',
    d: "4操作",
    key: "4"
  }
];

class Demo1 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: dataList
    }
  }

  getSelectedDataFunc = (selectedList,record,index,newData) => {
    console.log("data", newData);
    this.setState({
      data: newData
    })
  };

  /**
   * 切换页码的回调
   * @param {Number} pageIndex 跳转指定页数
   */
  freshData = (pageIndex) => {
    console.log('跳转至第 ', pageIndex, ' 页');
  }

  /**
   * 选择每页多少条的回调函数
   * @param {*} index 跳转指定页数
   * @param {*} value 设置每页显示多少条数据
   */
  onDataNumSelect=(index, value)=>{
    console.log('index：',index, ' value：',value);
  }
  
  render() {
    let paginationObj = {
      items:10,//一页显示多少条
      total:100,//总共多少条、
      freshData:this.freshData,//点击下一页刷新的数据
      onDataNumSelect:this.onDataNumSelect, //每页大小改变触发的事件
      noBorder:true,
      horizontalPosition: 'center'
    }
    return (
      <Grid
        className="demo"
        columns={column}
        data={this.state.data}
        getSelectedDataFunc={this.getSelectedDataFunc}
        paginationObj={paginationObj}
        canSum={true}
        multiSelect={true}
        afterRowLock={(key,isLock,columns)=>{//列锁定回调
          console.log(key,isLock,columns)
        }}
      />
    );
  }
}
export default Demo1;

2、报错信息

当前的行为：效果（可截图说明）及动作描述

右侧筛选栏，点击后瞬间就关闭了，没有办法进行操作

期望的行为:

点击筛选按钮后，停留，点击除了筛选框其他地方关闭