[useClickAway][Antd Input] 在 Antd Input 组件使用 useClickAway 页面报错
- Dominant language
- TypeScript
- Stars
- 15k
- Forks
- 2.8k
- Avg merge
- 15h 7m
- Merged PRs (30d)
- 2
Description
报错:

最小可复现代码:
```
import { useClickAway } from 'ahooks';
import { Input } from 'antd';
import { useRef } from 'react';
const { TextArea } = Input;
const Comp = () => {
const ref = useRef(null);
useClickAway(() => {
console.log('ClickAway');
}, ref);
return ;
};
```
出错的代码位置是 packages/hooks/src/utils/getDocumentOrShadow.ts:
```
const checkIfAllInShadow = (targets: BasicTarget[]): boolean => {
return targets.every((item) => {
const targetElement = getTargetElement(item);
if (!targetElement) return false;
if (targetElement.getRootNode() instanceof ShadowRoot) return true; // 就是这里
return false;
});
};
```
使用原生的input元素是没有问题,但是使用 antd 的Input或者 TextArea 都会有问题。
Contributor guide
Research direction
Start with the minimal reproduction using useClickAway and an Antd Input or TextArea, then inspect packages/hooks/src/utils/getDocumentOrShadow.ts, especially checkIfAllInShadow and its getRootNode check. Compare the behavior with a native input. Done means the Antd components no longer cause the page error while the click-away behavior remains usable.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 42/100