Skip to content

Date cells are not focused while using tab key from keyboard #2403

@sumankaran003

Description

@sumankaran003

Bug description

Dates in SfDateRangePicker aren't focusable via keyboard (Tab/Arrow). OK and Cancel buttons can be focused, but date cells are not keyboard-accessible. Would love support for full keyboard navigation.

Steps to reproduce

Just integrate the SfDateRangePicker and when the calender is open hit the tab key from key board to navigate between dates.

The OK and Cancel button will be highlighted, but not the dates or month-year name on top.

Code sample

Code sample
SfDateRangePicker(
        allowViewNavigation: true,
        controller: _datePickerController,
        minDate: widget.firstDate,
        maxDate: widget.lastDate,
        selectionMode: DateRangePickerSelectionMode.single,
        view: DateRangePickerView.month,
        //showNavigationArrow: true,
        backgroundColor: Theme.of(context).colorScheme.onPrimary,
        monthViewSettings: const DateRangePickerMonthViewSettings(firstDayOfWeek: 1),
        showActionButtons: true,
        onSubmit: (value) => value is DateTime
            ? _confirmDateSelection(value, closeView: true)
            : _closeViewAndRefocus(),
        onCancel: _handleCancel,
        onSelectionChanged: (args) {
          if (args.value is DateTime) {
            final shouldClose = _lastTriggerSource == DateTriggerSource.tap;
            _confirmDateSelection(args.value as DateTime, closeView: shouldClose);
          }
          _lastTriggerSource = DateTriggerSource.tap;
        },
        headerStyle: DateRangePickerHeaderStyle(
          textAlign: TextAlign.center,
          backgroundColor: Theme.of(context).colorScheme.onPrimary,
          textStyle: Theme.of(context).textTheme.titleMedium,
        ),
      ),

Screenshots or Video

Screenshots / Video demonstration. I hitting tab key
Screen.Recording.2025-07-22.at.1.52.15.PM.mov

Stack Traces

Stack Traces
N/A

On which target platforms have you observed this bug?

Web

Flutter Doctor output

Doctor output
[✓] Flutter (Channel stable, 3.32.1, on macOS 15.5 24F74 darwin-arm64, locale en-IN) [2.6s]
    • Flutter version 3.32.1 on channel stable at /Users/2034795/fvm/versions/3.32.1
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b25305a883 (8 weeks ago), 2025-05-29 10:40:06 -0700
    • Engine revision 1425e5e9ec
    • Dart version 3.8.1
    • DevTools version 2.45.1

[✗] Android toolchain - develop for Android devices [2.6s]
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/to/macos-android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.


[✓] Xcode - develop for iOS and macOS (Xcode 16.4) [8.0s]
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 16F6
    • CocoaPods version 1.16.2

[✓] Chrome - develop for the web [217ms]
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2024.1) [216ms]
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.11+0-17.0.11b1207.24-11852314)

[✓] IntelliJ IDEA Community Edition (version 2023.1.7) [215ms]
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 78.2.1
    • Dart plugin version 231.9414.10

[✓] VS Code (version 1.85.1) [20ms]
    • VS Code at /Users/2034795/Downloads/Visual Studio Code.app/Contents
    • Flutter extension version 3.86.0

[✓] VS Code (version 1.88.0) [19ms]
    • VS Code at /Users/2034795/Downloads/Visual Studio Code 2.app/Contents
    • Flutter extension version 3.86.0

[✓] Connected device (2 available) [11.7s]
    • macOS (desktop) • macos  • darwin-arm64   • macOS 15.5 24F74 darwin-arm64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 138.0.7204.158

[✓] Network resources [2.5s]
    • All expected network resources are available.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions