@coreui/react CModal点击滚动条意外关闭的解决方法

方案1：禁用背景点击关闭，仅保留关闭按钮触发 #

给CModal添加backdrop="static"属性，这样只有点击头部的关闭按钮才会触发弹窗关闭，点击内部滚动条或背景都不会误触关闭逻辑：

<CModal
  alignment="center"
  visible={showSignUp}
  backdrop="static"
  onClose={() => setShowSignUp(false)}
  className="custom-modal"
>
  <CModalHeader onClose={() => setShowSignUp(false)}>
    <CModalTitle
      style={{ textAlign: "center", flex: 1 }}
      id="LiveDemoExampleLabel"
    >
      Sign up
    </CModalTitle>
  </CModalHeader>
  <CModalBody>
    <>
      {/* 弹窗内容 */}
    </>
  </CModalBody>
</CModal>

方案2：在关闭回调中判断点击目标，排除滚动条触发 #

如果需要保留背景点击关闭的功能，可通过判断点击元素是否为滚动条/弹窗内部区域，避免误触发关闭：

const handleModalClose = (e) => {
  const target = e?.target;
  // 若点击的是弹窗容器的滚动条，不执行关闭
  if (target?.classList.contains('custom-modal') && target.scrollWidth > target.clientWidth) {
    return;
  }
  setShowSignUp(false);
};

// 修改弹窗组件的关闭回调
<CModal
  alignment="center"
  visible={showSignUp}
  onClose={handleModalClose}
  className="custom-modal"
>
  <CModalHeader onClose={handleModalClose}>
    <CModalTitle
      style={{ textAlign: "center", flex: 1 }}
      id="LiveDemoExampleLabel"
    >
      Sign up
    </CModalTitle>
  </CModalHeader>
  <CModalBody>
    <>
      {/* 弹窗内容 */}
    </>
  </CModalBody>
</CModal>

注意：尽量避免在CModal和CModalHeader上重复设置onClose，统一使用一个处理函数可减少逻辑冲突。

内容的提问来源于stack exchange，提问作者ta7foun