-
Notifications
You must be signed in to change notification settings - Fork 925
Open
Description
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
- Open a page containing a SfDataGrid with filtering enabled.
- Tap on the filter icon in a column header.
- Tap on the text input field to start filtering.
- 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 resourcesReactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels