BUG useClickAway 不可用

[zhangenming]

import { useToggle, useClickAway } from 'ahooks'
import { useRef } from 'react'
import { useClickAway as useClickAway2 } from 'react-use'

function App() {
  const [val, { setLeft, setRight }] = useToggle()

  return (
    <>
      <button onClick={setRight}>show</button>
      {val && <Comp setLeft={setLeft} />}
    </>
  )
}

function Comp({ setLeft }) {
  const ref = useRef()
  useClickAway(() => {
    console.log('执行useClickAway')
    setLeft()
  }, ref)

  // useClickAway2(ref, () => {
  //   console.log('执行useClickAway')
  //   setLeft()
  // })
  return (
    <div ref={ref} style={{ padding: '50px' }}>
      detail
    </div>
  )
}
export default App

感谢你们的开源 但确实有的被坑到
最简复现如上
换成react-use后正常工作
所以应该不是我的场景问题

[zhangenming]

第一次click时 不知道为什么你们的组件会执行console.log('执行useClickAway')
按理说这时候组件刚刚挂载
应该只执行useClickAway本身
不知道useClickAway的回调为什么也执行了
导致 打开的状态又被关闭了

[liuyib]

我后面排查下。另外，欢迎 PR 改进问题~

[liuyib]

useClickAway 问题汇总（方便追踪）：
https://github.com/alibaba/hooks/issues?q=is%3Aissue+is%3Aopen+useClickAway

• useClickAway判断不对 #1641
• useClickAway错误调用 #2435
• useClickAway works wrong #2321

[liuyib]

@zhangenming 你的问题可以先指定触发事件为 ['mousedown', 'touchstart'] 来解决问题：

useClickAway(
  () => {
    console.log('执行useClickAway');
    setLeft();
  },
  ref,
  ['mousedown', 'touchstart'],
);

---

对于这种动态 dom，click 事件的行为有些问题，类似的 issue：

• useClickAway triggers on click if descendant target element no longer exists streamich/react-use#2183
• Improper default events for useClickAway streamich/react-use#1087

我再研究研究

[liuyib]

另一种解决方案：

import { useToggle, useClickAway } from 'ahooks'
import { useRef } from 'react'
import { useClickAway as useClickAway2 } from 'react-use'

function App() {
  const [val, { setLeft, setRight }] = useToggle()

  return (
    <>
      <button onClick={(e) => {
+      e.stopPropagation();
        setRight();
      }}>show</button>
      {val && <Comp setLeft={setLeft} />}
    </>
  )
}

function Comp({ setLeft }) {
  const ref = useRef()
  useClickAway(() => {
    console.log('执行useClickAway')
    setLeft()
  }, ref)

  // useClickAway2(ref, () => {
  //   console.log('执行useClickAway')
  //   setLeft()
  // })
  return (
    <div ref={ref} style={{ padding: '50px' }}>
      detail
    </div>
  )
}
export default App

[liuyib]

同：#1641 (comment)

楼主的使用方式，违背了 useClickAway 的设计用途：“监听目标元素外的点击事件”。

请考虑把不想触发 useClickAway 的元素放在 ref 引用的 dom 范围里。

---

请注意：ahooks 和 react-use 的 useClickAway 的定义都是“监听目标元素外的点击事件”。楼主的用法本身就是错误的，之所以 react-use 工作了，是因为其内部监听的 mousedown/touchstart 恰好没有被你绑定的 click 事件冒泡影响到。给 ahooks 的 useClickAway 第三个参数传 ["mousedown", "touchstart"] 则行为和 react-use 就完全一致了。但这是用了一种错误的方式错误地解决了问题，治标没治本。错就错在违背了 useClickAway 的设计用途：“监听目标元素外的点击事件”。

所以，请考虑把不想触发 useClickAway 的元素放在 ref 引用的 dom 范围里。，否则，你的用法不符合 useClickAway 的设计用途。