alibaba / alibaba/hooks

[useClickAway][Antd Input] 在 Antd Input 组件使用 useClickAway 页面报错

Open
#2,702 1 comment 1 reaction 0 assignees View on GitHub
Dominant language
TypeScript
Stars
15k
Forks
2.8k
Avg merge
15h 7m
Merged PRs (30d)
2

Description

报错:

![image](https://github.com/user-attachments/assets/ec16ba52-2c6d-4329-b92e-0cd5f57083cf)

最小可复现代码:

```
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.