[FormBuilderTypeAhead]: How to Select a value to be preselected

[abhilashsajeev]

Is there an existing issue for this?

• [X] I have searched the existing issues

Package/Plugin version

Current

Platforms

• [X] Android
• [X] iOS
• [X] Linux
• [X] MacOS
• [X] Web
• [X] Windows

Flutter doctor

Flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.10.6, on macOS 13.0 22A380 darwin-arm64, locale en-IN)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.2)
[✓] VS Code (version 1.82.2)
[✓] Connected device (2 available)
[✓] Network resources

• No issues found!

Minimal code example

Code sample

final initialValue = selected != null
                ? data.firstWhere(
                    (element) => element.iaCaseType == selected,
                  )
                : null;
            print('IA type initial value ${initialValue?.iaTypeName}');
            return FormBuilderTypeAhead<IaTypes>(
              initialValue: initialValue,
              decoration: const InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'IA Type',
                hintText: 'IA Type',
              ),
              name: 'ia_type',
              itemBuilder: (context, item) {
                return ListTile(title: Text(item.iaTypeName!));
              },
              selectionToTextTransformer: (suggestion) =>
                  suggestion.iaTypeName!,
              controller: TextEditingController(text: ''),
              validator: FormBuilderValidators.compose(
                  [FormBuilderValidators.required()]),
              suggestionsCallback: (query) {
                final pattern = RegExp('[^a-zA-Z0-9\s]');
                if (query.isNotEmpty) {
                  var lowercaseQuery = query.toLowerCase();
                  return data.where((IaTypes item) {
                    return item.iaTypeName!
                        .toLowerCase()
                        .replaceAll(pattern, '')
                        .contains(lowercaseQuery);
                  }).toList(growable: false)
                    ..sort((a, b) => a.iaTypeName!
                        .toLowerCase()
                        .indexOf(lowercaseQuery)
                        .compareTo(b.iaTypeName!
                            .toLowerCase()
                            .indexOf(lowercaseQuery)));
                } else {
                  return data;
                }
              },
            );

Current Behavior

No preselected value is showing. Even though I have selected initialValue and passed it to intialvalue field in the FormBuilderTypeAhead

Expected Behavior

when initialvalue to be passed to filed it should show it as preseleted item

Steps To Reproduce

Using Obx of Getx

Aditional information

No response

[deandreamatias]

Hi!, Please update the issue info with a minimal code example (without dependencies) and add a steps to reproduce the issue. Thanks

[abhilashsajeev]

@deandreamatias Code example already given above. It is just the component rendered in FutureBuilder when snapshot.data is valid one

            final initialValue = selected != null
                ? data.firstWhere(
                    (element) => element.iaCaseType == selected,
                  )
                : null;
            print('IA type initial value ${initialValue?.iaTypeName}');
            return FormBuilderTypeAhead<IaTypes>(
              initialValue: initialValue,
              decoration: const InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'IA Type',
                hintText: 'IA Type',
              ),
              name: 'ia_type',
              itemBuilder: (context, item) {
                return ListTile(title: Text(item.iaTypeName!));
              },
              selectionToTextTransformer: (suggestion) =>
                  suggestion.iaTypeName!,
              controller: TextEditingController(text: ''),
              validator: FormBuilderValidators.compose(
                  [FormBuilderValidators.required()]),
              suggestionsCallback: (query) {
                final pattern = RegExp('[^a-zA-Z0-9\s]');
                if (query.isNotEmpty) {
                  var lowercaseQuery = query.toLowerCase();
                  return data.where((IaTypes item) {
                    return item.iaTypeName!
                        .toLowerCase()
                        .replaceAll(pattern, '')
                        .contains(lowercaseQuery);
                  }).toList(growable: false)
                    ..sort((a, b) => a.iaTypeName!
                        .toLowerCase()
                        .indexOf(lowercaseQuery)
                        .compareTo(b.iaTypeName!
                            .toLowerCase()
                            .indexOf(lowercaseQuery)));
                } else {
                  return data;
                }
              },
            );

the value selected will be set in the state as a number

[deandreamatias]

@abhilashsajeev nice, But I need the definition of class IaTypes. You can modify the example/main.dart file and replace to use like minimal example code. The idea is that I can copy the code and run directly, without add any other things. Thanks

[abhilashsajeev]

@deandreamatias IaTypes looks like this

class IaTypes {
  int? iaCaseType;
  String? iaTypeName;

  IaTypes({this.iaCaseType, this.iaTypeName});

  IaTypes.fromJson(Map<String, dynamic> json) {
    iaCaseType = json['ia_case_type'];
    iaTypeName = json['ia_type_name'];
  }

  Map<String, dynamic> toJson() {
    final data = <String, dynamic>{};
    data['ia_case_type'] = iaCaseType;
    data['ia_type_name'] = iaTypeName;
    return data;
  }
}

[deandreamatias]

Maybe you need add equal comparison to this class @abhilashsajeev I think thats better you modify the example code and try to reproduce the issue with that

[abhilashsajeev]

@deandreamatias Most of people will work with some kind of class while using this. Can you include such example in the documentation using Array of Objects in addition to Current one