Rendering goes weird if onChange called and if controller property is set

[davoutuk]

I've noticed a rendering problem with ChipsInputAutocomplete when...

1. The controller property is set; and
2. The onChange handler is set that causes a 'setState()' call

[EmilyMoonstone]

Can you provide a code example?

[davoutuk]

To replicate

• Create a Flutter app with a 'main' Stateful widget that has a child column
• Add a ChipsInputAutocomplete as a child of the column
• Add a button as a child of the column
• Add a bool '_enabled' property to the 'main' stateful widget, initially set to false
• Set the button to be enabled/disabled based on the value of '_enabled'
• Add a 'ChipsAutocompleteController' property called 'chipController' to the main stateful widget
• Set the 'controller of the ChipsInputAutocomplete to the 'chipController'
• Set the ChipsInputAutocomplete 'onChanged' method handler to:

onChanged: (value) {
    setState(() {
       _enabled = !enabled
     })
}

To test:

1. Run the app
2. Add a chip entry
3. See how the ChipsInputAutocomplete rendering fails

[davoutuk]

Something like:

class _MyHomePageState extends State<MyHomePage> {
 
  final ChipsAutocompleteController controller = ChipsAutocompleteController();

  bool _enabled = false;

  _setButtonState() {
      setState(() {
        _enabled = !_enabled;
      });
  }

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          // Column is also a layout widget. It takes a list of children and
          // arranges them vertically. By default, it sizes itself to fit its
          // children horizontally, and tries to be as tall as its parent.
          //
          // Invoke "debug painting" (press "p" in the console, choose the
          // "Toggle Debug Paint" action from the Flutter Inspector in Android
          // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
          // to see the wireframe for each widget.
          //
          // Column has various properties to control how it sizes itself and
          // how it positions its children. Here we use mainAxisAlignment to
          // center the children vertically; the main axis here is the vertical
          // axis because Columns are vertical (the cross axis would be
          // horizontal).
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
             ChipsInputAutocomplete(
              controller: controller,
              onChanged: (value) {
                _setButtonState();
              }
             ),
             TextButton.icon(
              onPressed: _enabled == false ? null : () {
                ;
              },
              icon: const Icon(
                Icons.cancel,),
              label: const Text('Test button',)
          ),
          ],
        ),
      ),
    );
  }
}