doonfrs / pluto_grid_plus

PlutoGrid is a dataGrid for flutter that can be controlled by the keyboard on desktop and web. Of course, it works well on Android and IOS.
https://pluto.weblaze.dev
MIT License
27 stars 28 forks source link

[Bug] - Custom filterWidget in PlutoColumn doesn't accept text input #68

Open RayendraSabandar opened 3 months ago

RayendraSabandar commented 3 months ago

Steps to reproduce the bug

  1. Create TextEditingController and FocusNode variables
  2. Create a PlutoGrid and PlutoColumn
  3. setShowColumnFilter, set this to be true
  4. Use TextField and put it in filterWidget
  5. In the UI, try to type anything in the TextField

Expected results

You should be able to see the characters you typed in the TextField. If you create a callback function in the onChanged, it should also show you the characters you typed in

Actual results

The entered characters are not entered. Nothing shows up on the onChanged callback or the onSubmitted callback.

Code sample


late final PlutoGridStateManager stateManager;
final TextEditingController _idController = TextEditingController();
final FocusNode _focusNode = FocusNode();

Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
            padding: const EdgeInsets.all(15),
            child: PlutoGrid(
                columns: createPlutoGridColumns(),
                rows: createPlutoGridRows(exesList),
                // columnGroups: columnGroups,
                onLoaded: (PlutoGridOnLoadedEvent event) {
                    stateManager = event.stateManager;
                    stateManager.setShowColumnFilter(true);
                },
                onChanged: (PlutoGridOnChangedEvent event) {
                    print("event: $event");
                },
                configuration: createPlutoGridconfig(),
            ),
        ),
    );
}

List<PlutoColumn> createPlutoGridColumns() {
    return <PlutoColumn>[
      PlutoColumn(
          title: 'ID',
          field: 'id',
          type: PlutoColumnType.text(),
          backgroundColor: Color(0xffF3EAE3),
          titleTextAlign: PlutoColumnTextAlign.center,
          textAlign: PlutoColumnTextAlign.center,
          filterWidget: TextField(
              controller: _idController,
              focusNode: _focusNode,
              keyboardType: TextInputType.text,
              textInputAction: TextInputAction.done,
              onChanged: (value) {
                  print("value onChanged: $value");
              },
              onSubmitted: (value) {
                  print("value onSubmitted: $value");
              },
              decoration: const InputDecoration(
                  labelText: 'Enter some text',
                  border: OutlineInputBorder(),
              ),
              style: const TextStyle(
                  color: Colors.black,
                  fontSize: 12,
              ),
          )
      ),
    ]
}

List<PlutoRow> createPlutoGridRows(List<ExList>? exes) {
    List<PlutoRow> rows = [];
    if (exes != null) {
        for (var ex in exes) {
            rows.add(PlutoRow(
                cells: {
                    "id": PlutoCell(value: ex.id),
                }
            ));
        }
    }

    return rows;
}

PlutoGridConfiguration createPlutoGridconfig() {
        return PlutoGridConfiguration(
            columnSize: const PlutoGridColumnSizeConfig(
                autoSizeMode: PlutoAutoSizeMode.equal, // Adjusts column size proportionally
            ),
            style: PlutoGridStyleConfig(
                enableColumnBorderHorizontal: true,
                activatedColor: kWhiteColor,
                gridBorderRadius: const BorderRadius.all(Radius.circular(2)),
                enableCellBorderVertical: false,
                enableColumnBorderVertical: false,
                rowHeight: 60,
                activatedBorderColor: kBrownMainColor,
                gridBorderColor: kWhiteColor,
                columnTextStyle: GoogleFonts.poppins(
                    fontSize: 14,
                    color: Colors.black,
                ),
                cellTextStyle: GoogleFonts.poppins(fontSize: 12, color: Colors.black),
            ),
        );
}

Execution Environment

Flutter version

Flutter 3.19.4

PlutoGrid version

pluto_grid_plus: ^8.4.1

OS

MacOS Sonoma 14.5 Device run in debug mode: MacOS, Chrome

The same widget would work fine if it is outside of the pluto grid column filterWidget and on the same page. I'm new to flutter, so if there's any data that I'm missing, please let me know and I'll try to provide it