阻止Bootstrap 5手风琴在表头输入框按空格键时展开/折叠

你的问题出在React Bootstrap的AccordionHeader会监听空格键的keyup事件来切换折叠状态，输入框的空格事件冒泡到头部组件后就触发了误操作。之前的onClick阻止冒泡有效，但onKeyUp没起作用可能是没精准匹配按键，或者事件传递阶段的问题，试试下面几种方案：

• 精准拦截空格键的keyup事件
  只在输入框按下并松开空格键时阻止事件冒泡，不影响其他按键正常使用：

  <input
    type="text"
    onClick={(e) => e.stopPropagation()}
    onKeyUp={(e) => {
      if (e.key === ' ') {
        e.stopPropagation();
      }
    }}
  />
  

• 改用捕获阶段拦截事件
  如果冒泡阶段阻止无效，试试在事件捕获阶段就拦截，避免事件传到AccordionHeader：

  <input
    type="text"
    onClick={(e) => e.stopPropagation()}
    onKeyUpCapture={(e) => {
      if (e.key === ' ') {
        e.stopPropagation();
      }
    }}
  />
  

• 在AccordionHeader层面过滤事件源
  直接给AccordionHeader加判断，只有当事件不是来自输入框时才执行折叠逻辑：

  <AccordionHeader
    onClick={(e) => {
      if (!e.target.closest('input')) {
        // 保留原有的折叠触发逻辑
      }
    }}
    onKeyUp={(e) => {
      if (e.key === ' ' && !e.target.closest('input')) {
        // 保留原有的折叠触发逻辑
      }
    }}
  >
    <input type="text" />
  </AccordionHeader>
  

• 同时调用stopPropagation和preventDefault
  个别场景下浏览器默认的空格行为会和组件事件叠加，两个方法一起用试试：

  <input
    type="text"
    onClick={(e) => e.stopPropagation()}
    onKeyUp={(e) => {
      if (e.key === ' ') {
        e.stopPropagation();
        e.preventDefault();
      }
    }}
  />
  

另外可以检查下React Bootstrap的版本，旧版本可能存在这类事件处理的bug，升级到最新稳定版说不定能直接解决问题。

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