Repository navigation
RangeSlider thumb overlay remains visible after touch interaction ends on mobile #189205
Description
Steps to reproduce
- Run the code sample on Android or iOS.
- Drag either RangeSlider thumb.
- Lift your finger.
- Observe that the circular highlight remains around the thumb.
This appears related to PR #182185, which makes the selected RangeSlider thumb request keyboard focus during pointer interaction. The focus is retained after a touch gesture, and RangeSlider paints an overlay for the focused thumb.
Expected results
The pressed/dragged overlay should disappear when a touch gesture ends.
Keyboard navigation should still display an appropriate focus indicator when focus was obtained through keyboard navigation.
Actual results
The touched thumb retains focus and its overlay remains visible until focus is moved by another interaction.
Code sample
Code sample
import 'package:flutter/material.dart';
void main() {
runApp(const ExampleApp());
}
class ExampleApp extends StatelessWidget {
const ExampleApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(useMaterial3: true),
home: const RangeSliderExample(),
);
}
}
class RangeSliderExample extends StatefulWidget {
const RangeSliderExample({super.key});
@override
State<RangeSliderExample> createState() => _RangeSliderExampleState();
}
class _RangeSliderExampleState extends State<RangeSliderExample> {
RangeValues values = const RangeValues(3, 7);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('RangeSlider focus overlay')),
body: Padding(
padding: const EdgeInsets.all(24),
child: Column(
mainAxisAlignment: .center,
children: [
const Text(
'Drag a thumb and lift your finger. '
'The overlay remains until focus moves elsewhere.',
textAlign: .center,
),
const SizedBox(height: 24),
const TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Tap here to move focus',
),
),
const SizedBox(height: 24),
SliderTheme(
data: SliderTheme.of(
context,
).copyWith(overlayColor: Colors.red.withValues(alpha: 0.25)),
child: RangeSlider(
values: values,
min: 0,
max: 10,
divisions: 10,
labels: RangeLabels(
values.start.round().toString(),
values.end.round().toString(),
),
onChanged: (newValues) {
setState(() {
values = newValues;
});
},
),
),
],
),
),
);
}
}
Screenshots or Video
Simulator.Screen.Recording.-.iPhone.17.-.2026-07-10.at.12.27.35.mov
Logs
No response
Flutter Doctor output
Doctor output
[✓] Flutter (Channel stable, 3.44.5, on macOS 26.5.2 25F84 darwin-arm64, locale en-US) [466ms]
• Flutter version 3.44.5 on channel stable at /Users/xxx/Coding/flutter/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision f94f4fc76b (3 days ago), 2026-07-06 11:19:24 -0700
• Engine revision 83675ed276
• Dart version 3.12.2
• DevTools version 2.57.0
• Feature flags: enable-web, enable-linux-desktop, enable-macos-desktop, enable-windows-desktop, enable-android, enable-ios, cli-animations, enable-native-assets,
enable-swift-package-manager, omit-legacy-version-file, enable-lldb-debugging, enable-uiscene-migration
[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0) [1,701ms]
• Android SDK at /Users/xxx/Library/Android/sdk
• Emulator version 36.6.11.0 (build_id 15507667) (CL:N/A)
• Platform android-36, build-tools 35.0.0
• Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
This is the JDK bundled with the latest Android Studio installation on this machine.
To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
• Java version OpenJDK Runtime Environment (build 21.0.10+-117844308-b1163.108)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 26.6) [1,849ms]
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 17F113
• CocoaPods version 1.17.0
[✓] Chrome - develop for the web [5ms]
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Connected device (5 available) [6.2s]
• Iphone17Pro (wireless) (mobile) • 00008150-000E59C02E61401C • ios • iOS 26.5.2 23F84
• Telkkä1 (wireless) (mobile) • 00008110-000279691122801E • ios • iOS 26.5.2 23F84
• iPhone 17 (mobile) • 818AB84A-6C97-4E25-9D7C-246792E9F304 • ios • com.apple.CoreSimulator.SimRuntime.iOS-26-5 (simulator)
• macOS (desktop) • macos • darwin-arm64 • macOS 26.5.2 25F84 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 150.0.7871.115
! Error: Browsing on the local area network for GoldenEye. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this
Mac.
The device must be opted into Developer Mode to connect wirelessly. (code -27)
[✓] Network resources [256ms]
• All expected network resources are available.
• No issues found!
Activity
suryaKommana2662 commentedon Jul 10, 2026
@koodimetsa Thanks for the detailed report and the reproducible sample. I tested the sample on Android(Motorola) and observed that after dragging a RangeSlider thumb and releasing it, the overlay remains visible. In my testing, the overlay also remained visible after tapping on an empty area outside the slider, which seems slightly different from the behavior described in the report.
Could you please share a short screen recording demonstrating the behavior you're seeing? That will help verify whether I'm observing the same issue before routing it to the appropriate team.
Flutter Doctor Output
koodimetsa commentedon Jul 10, 2026
@suryaKommana2662
Sorry, my wording/example was partial. Edited the code and added a video where there is textfield to move the focus to. In my original code background also had tap listener, which is not the case in the sample code.
suryaKommana2662 commentedon Jul 10, 2026
@koodimetsa Thanks for updating the sample and adding the screen recording. I was able to reproduce the issue on Android using the updated sample. After dragging a
RangeSliderthumb and releasing it, the thumb retains focus and its overlay remains visible until focus is moved to another focusable widget (such as theTextField). I'm routing this to theteam-designfor further investigation.KarthikManikuttan commentedon Jul 16, 2026
@suryaKommana2662 @Piinks I would like to work on this issue.
Bhootna8 commentedon Jul 16, 2026
@suryaKommana2662 @Piinks I'd like to work on this. I've reproduced the issue on Android. Planning to fix by tracking the pointer device kind on PointerDownEvent in the render object, and calling unfocus() on the active thumb's FocusNode inside _endInteraction() when the gesture originated from a touch or stylus — so focus is cleared on touch release while keyboard-acquired focus is preserved.
KarthikManikuttan commentedon Jul 16, 2026
@suryaKommana2662 @Piinks
Given the active Material/Cupertino freeze, is this RangeSlider regression fix something maintainers would consider for
override code freeze, or should I expect this PR to wait until the Material decoupling path is ready?I understand this may not meet the bar for an override, and I’m happy to keep it open for discussion or port it later if that’s preferred.
navaronbracke commentedon Jul 17, 2026
Yes this will need to be ported to material_ui
Piinks commentedon Jul 20, 2026
Just to be clear, please do not open PRs in material_ui right now. It is not ready to accept contributions yet.
We can review the changes here and then we will provide instructions for porting them over to the new packages when ready. It looks like there are 2 PRs open?
KarthikManikuttan commentedon Jul 20, 2026
@Piinks Yes i opened one PR , please review the update as possible.
Fix RangeSlider thumb overlay remains visible after touch interaction…
Fix RangeSlider thumb overlay remains visible after touch interaction…
github-actions commentedon Sep 7, 2026
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.