Skip to content

[DataGrid] Filter TextField loses focus and closes keyboard immediately #2499

@paolanoiaapsystem

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions