Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

useClickAway should support one or more elements

Aperta
  • Qualcosa non va?
#2,490 2 commenti 1 reazione 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
Mezza giornata
Idoneità per principianti
48/100
Tipo di issue
Funzionalità
Chiarezza
Specificata chiaramente
Stato di attività
Ferma
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

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.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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.

Lingua principale
TypeScript
Stelle
44k
Fork
3.3k
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di streamich/react-use

Tutte le issue di streamich/react-use

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.