Hacktoberfest 2026：维护者为十月标记出来的 issue，仍然开放、适合新手。 浏览 Hacktoberfest issue

useClickAway should support one or more elements

未关闭
  • 哪里不对？
#2,490 2 条评论 1 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
2/5
预计耗时
半天
新手友好度
48/100
Issue 类型
功能
描述清晰度
描述清楚
活跃度
停滞
技术栈
react, typescript
领域
frontend

调研方向

Read src/useClickAway.ts and compare its current single-ref API with the multiple-ref implementation described in the issue. Verify that a click invokes the callback only when it is outside every observed element, while the existing single-element behavior and toggle case remain intact.

由索引模型根据 Issue 内容生成。

描述

I have a case where a popover is supposed to be closed when I click anything outside the popover. The button which triggers the popover also works as a toggle, i. e. clicking it again closes the popover. This behavior is quite common and intuitive and should be preserved. Now, using useClickAway I can close the popover but when I try to do the same via toggling said button, the events interfere with each other and result in the popover being displayed again (the click outside closing it and the click on the button showing it again).

The apparent fix would be to allow useClickAway to receive one element or a list of elements and in the latter case only invoke the callback function if the click happened outside all observed elements.

I've adapted the useClickAway implementation to do this as follows and it works for my specific case:

import type { MutableRefObject } from "react";
import { useEffect, useRef } from "react";
import { off, on } from "react-use/lib/misc/util";

const defaultEvents = ["mousedown", "touchstart"];

// This is based on react-use's clickAway hook but made to work with multiple refs in addition to a single ref,
// meaning the click needs to happen outside all registered refs.
// See https://github.com/streamich/react-use/blob/master/src/useClickAway.ts for the original hook
export function useClickAway<
  T extends Element | null = Element,
  E extends Event = Event
>(
  refs: Array<MutableRefObject<T>>,
  onClickAway: (event: E) => void,
  events: string[] = defaultEvents
): void {
  const savedCallback = useRef(onClickAway);
  const savedRefs = useRef(refs);
  useEffect(() => {
    savedCallback.current = onClickAway;
    savedRefs.current = refs;
  }, [onClickAway, refs]);

  useEffect(() => {
    const handler = (event: E) => {
      const clickedOutside = savedRefs.current.every(ref => {
        const { current: el } = ref;
        return el && !el.contains(event.target as Node);
      });
      if (clickedOutside) {
        savedCallback.current(event);
      }
    };
    for (const eventName of events) {
      on(document, eventName, handler);
    }
    return () => {
      for (const eventName of events) {
        off(document, eventName, handler);
      }
    };
  }, [events]);
}

I'd appreciate it if something like that became available upstream so I could get rid of my custom implementation. I could also make a PR if that's increases the chance of it being made available upstream.

主要语言
TypeScript
星标
44k
派生
3.3k
30 天内没有已合并 PR

环境准备

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

streamich/react-use 的其他 Issue

查看 streamich/react-use 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。