[DataGrid] Filter TextField loses focus and closes keyboard immediately

[paolanoiaapsystem]

Bug description

Syncfusion Package Version: 32.1.25

I am experiencing a critical issue with the filtering functionality in the DataGrid. When attempting to filter a column by text, the TextField inside the filter UI loses focus immediately after being tapped or after the first character is entered. This causes the software keyboard to dismiss instantly, making it impossible for the user to input filter criteria.

Steps to reproduce

1. Open a page containing a SfDataGrid with filtering enabled.
2. Tap on the filter icon in a column header.
3. Tap on the text input field to start filtering.
4. Observe that the keyboard opens and then immediately closes as the TextField loses focus.

Code sample

Code sample

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_datagrid/datagrid.dart';

class TestGriglia extends StatefulWidget {
  const TestGriglia({super.key});

  @override
  _TestGrigliaState createState() => _TestGrigliaState();
}

class _TestGrigliaState extends State<TestGriglia> {
  List<Employee> employees = <Employee>[];
  late EmployeeDataSource employeeDataSource;

  @override
  void initState() {
    super.initState();
    employees = getEmployeeData();
    employeeDataSource = EmployeeDataSource(employeeData: employees);
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Syncfusion Flutter DataGrid')),
      body: SfDataGrid(
        source: employeeDataSource,
        columnWidthMode: ColumnWidthMode.fitByColumnName,
        headerGridLinesVisibility: GridLinesVisibility.both,
        gridLinesVisibility: GridLinesVisibility.both,
        columns: <GridColumn>[
          GridColumn(
            columnName: 'id',
            label: Container(
              key: Key("id"),
              padding: EdgeInsets.symmetric(horizontal: 4.0),
              alignment: Alignment.centerLeft,
              child: Text(
                'id ',
                // textAlign: TextAlign.start,
                overflow: TextOverflow.ellipsis,
              ),
            ),
          ),
          GridColumn(
            columnName: 'name',
            label: Container(
              key: Key("name"),
              padding: EdgeInsets.symmetric(horizontal: 4.0),
              alignment: Alignment.centerLeft,
              child: Text(
                'name',
                // textAlign: TextAlign.start,
                overflow: TextOverflow.ellipsis,
              ),
            ),
          ),
          GridColumn(
            columnName: 'designation',
            label: Container(
              key: Key("designation"),
              padding: EdgeInsets.symmetric(horizontal: 4.0),
              alignment: Alignment.centerLeft,
              child: Text(
                'designation',
                // textAlign: TextAlign.start,
                overflow: TextOverflow.ellipsis,
              ),
            ),
          ),
          GridColumn(
            columnName: 'salary',
            label: Container(
              key: Key("salary"),
              padding: EdgeInsets.symmetric(horizontal: 4.0),
              alignment: Alignment.centerLeft,
              child: Text(
                'salary',
                overflow: TextOverflow.ellipsis,
              ),
            ),
          ),
        ],
      ),
    );
  }

  List<Employee> getEmployeeData() {
    return [
      Employee(10001, 'James', 'Project Lead', 20000),
      Employee(10002, 'Kathryn', 'Manager', 30000),
      Employee(10003, 'Lara', 'Developer', 15000),
      Employee(10004, 'Michael', 'Designer', 15000),
      Employee(10005, 'Martin', 'Developer', 15000),
      Employee(10006, 'Newberry', 'Developer', 15000),
      Employee(10007, 'Balnc', 'Developer', 15000),
      Employee(10008, 'Perry', 'Developer', 15000),
      Employee(10009, 'Gable', 'Developer', 15000),
      Employee(10010, 'Grimes', 'Developer', 15000),
      Employee(10011, 'Sophia', 'QA Engineer', 14000),
      Employee(10012, 'Ethan', 'Business Analyst', 18000),
      Employee(10013, 'Olivia', 'HR Manager', 22000),
      Employee(10014, 'Liam', 'UI/UX Designer', 16000),
      Employee(10015, 'Emma', 'Scrum Master', 21000),
      Employee(10016, 'Noah', 'DevOps Engineer', 19000),
      Employee(10017, 'Ava', 'Product Owner', 25000),
      Employee(10018, 'Isabella', 'Technical Writer', 13000),
      Employee(10019, 'Mason', 'Security Analyst', 17000),
      Employee(10020, 'Logan', 'Cloud Architect', 28000),
    ];
  }
}

class Employee {
  Employee(this.id, this.name, this.designation, this.salary);

  final int id;
  final String name;
  final String designation;
  final int salary;
}

class EmployeeDataSource extends DataGridSource {
  EmployeeDataSource({required List<Employee> employeeData}) {
    _employeeData = employeeData
        .map<DataGridRow>(
          (e) => DataGridRow(
            cells: [
              DataGridCell<int>(columnName: 'id', value: e.id),
              DataGridCell<String>(columnName: 'name', value: e.name),
              DataGridCell<String>(
                columnName: 'designation',
                value: e.designation,
              ),
              DataGridCell<int>(columnName: 'salary', value: e.salary),
            ],
          ),
        )
        .toList();
  }

  List<DataGridRow> _employeeData = [];

  @override
  List<DataGridRow> get rows => _employeeData;

  @override
  DataGridRowAdapter buildRow(DataGridRow row) {
    return DataGridRowAdapter(
      cells: row.getCells().map<Widget>((e) {
        return Container(
          alignment: Alignment.center,
          padding: EdgeInsets.all(8.0),
          child: Text(e.value.toString()),
        );
      }).toList(),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

test_griglia.mp4

Stack Traces

Stack Traces

[Add the Stack Traces here]

On which target platforms have you observed this bug?

Android

Flutter Doctor output

Doctor output

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.38.7, on Microsoft Windows [Versione 10.0.26200.7628], locale it-IT)
[√] Windows Version (Windows 11 or higher, 25H2, 2009)
[√] Android toolchain - develop for Android devices (Android SDK version 36.1.0)
[√] Chrome - develop for the web
[√] Visual Studio - develop Windows apps (Visual Studio Enterprise 2022 17.14.17)
[√] Connected device (4 available)
[√] Network resources

[paolanoiaapsystem]

@Gowtham-SF4769
Hi there, I’m just following up on this issue to see if any further information is needed from my side to help with the initial assessment. I'm happy to provide more details or logs if that helps. Thanks.

[Gowtham-SF4769]

Hi @paolanoiaapsystem ,

We apologize for any inconvenience. This is a known issue. Based on our analysis, the root cause lies within the Flutter framework. We have already reported this to the Flutter team and are currently awaiting their response. We have also added additional comments to the ticket requesting an update. Once we receive any information from their end, we will proceed with the necessary actions. For your reference, the link to the ticket raised with the Flutter team is provided below.

Link: Multiple Rebuild issue on opening a keyboard · Issue #105184 · flutter/flutter

As a workaround, SfDataGrid supports programmatic filtering, which you can utilize. We have also provided a simple solution for applying dynamic filtering using input from a text field, which may be helpful.

We have attached both a sample and a video demo for your reference. Kindly review them for further guidance.

Code Sample: SfDataGrid.zip

Video Demo:

VideoDemo.mp4

Regards,
Gowtham R

[ashok-kuvaraja]

Hi @paolanoiaapsystem,

As there has been no further update, we are proceeding to close this GitHub issue.

If you have any additional queries or need further assistance, please feel free to reach out. We are always happy to help.

Regards,
Ashok K