Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

Mobile only: Button is not pressable if I change color from `undefined` to value and back at `onPointerUp` event

Offen
  • Stimmt etwas nicht?
#374 1 Kommentar 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Anfängerfreundlichkeit
35/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Veraltet
Tech-Stack
javascript, react
Bereich
frontend, mobile-dev

Rechercherichtung

Beginne damit, das bereitgestellte UnstyledButton-Beispiel auf Mobilgeräten mit RSD 0.0.47 zu reproduzieren, wobei du dich auf den Übergang vom aktiven Farbwert zurück zu undefined während onPointerUp konzentrierst. Verfolge den Pfad von Pointer-Event und Style-Update; abgeschlossen ist es, wenn onClick zuverlässig ausgelöst wird, nachdem der aktive Style entfernt wurde.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

bug
Describe the issue

Our component manages button active style internally like on example below.
When onPointerUp callback is fired the style with the color property is removed from button element.
It somehow result in onClick callback not working.

https://github.com/user-attachments/assets/17810d7c-68ed-4d41-b16b-d3c739065c46

Expected behavior

onClick works as expected despite the change of styles

Steps to reproduce

RSD 0.0.47, the issue reproduces only on mobile.

const UnstyledButton = () => {
  const [isActive, setActive] = React.useState(false);

  return (
    <h.button
      style={isActive && styles.active}
      type="button"
      role="button"
      onClick={() => alert('!')}
      onPointerDown={() => setActive(true)}
      onPointerUp={() => setActive(false)}
      onPointerOut={() => setActive(false)}
      onPointerCancel={() => setActive(false)}
      onKeyDown={({ key }) => {
        if (key === "Enter" || key === " " || key === "Space") {
          setActive(true);
        }
      }}
      onKeyUp={() => setActive(false)}
      {...props}
    >
      Test Button
    </h.button>
  );
};
UnstyledButton.displayName = "UnstyledButton";

const styles = css.create({
  active: {
    color: '#0f0',
  },
});
Vorherrschende Sprache
JavaScript
Sterne
3.6k
Forks
206
Keine gemergten PRs in 30 T.

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus react/react-strict-dom

Alle Issues in react/react-strict-dom

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.