ReactiveRawAutocomplete not setting correct displayValue when set programmatically

[dumikaiya]

I'm probably missing some implementation issue here but ReactiveRawAutocomplete is not displaying the correct value of the object when the object is set programmatically, it's just showing the toString() value of the object. for example:

class TestGroup {
  final int id;
  final String name;
  final String description;
  const TestGroup({
    required this.id,
    required this.name,
    required this.description,
  });
}

class FormClass {
  static final form = fb.group({
    'group': fb.control<int>(1),
  });
}

class TestGroupValueAccessor extends ControlValueAccessor<int, TestGroup> {
  TestGroupValueAccessor();
  @override
  TestGroup? modelToViewValue(int? modelValue) {
    return [
      const TestGroup(
          id: 1, name: 'Perekani Group', description: 'Obnoxious Group'),
      const TestGroup(
          id: 2, name: 'Talandira Group', description: 'Obnoxious Group'),
      const TestGroup(
          id: 3, name: 'Tamandani Group', description: 'Obnoxious Group')
    ].firstWhereOrNull((element) => element.id == modelValue);
  }

  @override
  int? viewToModelValue(TestGroup? viewValue) {
    return viewValue?.id;
  }
}

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: ReactiveForm(
          formGroup: FormClass.form,
          child: ReactiveRawAutocomplete<int, TestGroup>(
            displayStringForOption: (option) => option.name,
            valueAccessor: TestGroupValueAccessor(),
            optionsBuilder: (TextEditingValue textEditingValue) {
              return [
                const TestGroup(
                    id: 1,
                    name: 'Perekani Group',
                    description: 'Obnoxious Group'),
                const TestGroup(
                    id: 2,
                    name: 'Talandira Group',
                    description: 'Obnoxious Group'),
                const TestGroup(
                    id: 3,
                    name: 'Tamandani Group',
                    description: 'Obnoxious Group')
              ]
                  .where((group) => group.name
                      .toLowerCase()
                      .contains(textEditingValue.text.toLowerCase()))
                  .toList();
            },
            optionsViewBuilder: (context, onSelected, options) {
              return Material(
                elevation: 4.0,
                child: ListView.separated(
                  padding: EdgeInsets.zero,
                  itemCount: options.length,
                  itemBuilder: (BuildContext context, int index) {
                    final group = options.elementAt(index);
                    return ListTile(
                      title: Text(group.name),
                      onTap: () {
                        onSelected(group);
                      },
                    );
                  },
                  separatorBuilder: (BuildContext context, int index) =>
                      const Divider(),
                ),
              );
            },
            formControlName: 'group',
            decoration: const InputDecoration(
              labelText: 'Group',
              border: OutlineInputBorder(),
            ),
            style: const TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.normal,
            ),
          ),
        ),
      ),
    );
  }
}

Here I expected that the initial value will be 'Perekani Group' displayed in the field. Why is it showing an 'instance of group'?

[vasilich6107]

Hi
Thanks for a complete reproduction sample.

fixed in reactive_raw_autocomplete 2.0.1

[github-actions]

Hi @dumikaiya!
Your issue has been closed. If we were helpful don't forget to star the repo.

Please check our reactive_forms_generator package

We would appreciate sponsorship subscription or one time donation
https://github.com/sponsors/artflutter