shoelace-style/shoelace

[bug] Radio buttons show inconsistent state when using iPhone

Open

#2,444 opened on May 23, 2025

View on GitHub
 (2 comments) (1 reaction) (0 assignees)TypeScript (922 forks)github user discovery
buggood first issue

Repository metrics

Stars
 (13,867 stars)
PR merge metrics
 (No merged PRs in 30d)

Description

Describe the bug

Radio buttons show inconsistent state when using iPhone.

To Reproduce

  1. Go to https://shoelace.style/components/radio-button
  2. Select one button using touch. Then using touch, press on the second button and move finger slightly before releasing the touch.
  3. The selected state becomes inconsistent, two buttons show they are selected when it should be only possible to select one button.

It is also possible to reproduce this bug using Chrome dev tools - device toolbar - simulating touch.

Screenshots

Image

Browser / OS

  • OS: iPhone SE 2022
  • Browser: Safari latest

or

  • OS: Windows 11
  • Browser: Chrome latest, device toolbar

Possible cause

Maybe there is some conflict with scroll events. It seems that this issue happens when by moving slightly over button the scroll starts to happen and then when touch is released it means stopping of scrolling and touch release event might not be registered by the radio button component.

Contributor guide

Research direction
Investigate the touch event handling in the radio button component, focusing on the conflict with scroll events. Check the touch start and end listeners to see why moving slightly triggers scroll and fails to register the touch release properly.
Tech stack
javascripttypescriptweb components
Domain
frontend
Issue type
Bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
HTMLCSSJavaScript
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70