Use of DropDownButtonFormField within step

[ReallySmallSoftware]

I'm seem to be having an issue using a DropDownButtonFormField within a step. I just have some simple strings as options, and I have an onChange and an initial value that matches one of the items in the list.

The first time I click on the drop down nothing happens. The second time renders the list.

Clicking seems to cause the parent easy_stepper to rebuild. None of the other controls I have show this behaviour (mainly textformfields, but also a custom drop down (different use case)).

I moved the dropdown outside the step on another page and it behaves as I would expect.

I wondered if anyone else had seen this problem, or was using this control successfully within a step?

Quite happy for someone to tell me I'm being an idiot. Below is a cutdown version of the widget that is included as an EasyStep that shows this behaviour.

import 'package:flutter/material.dart';
import 'package:juststartingout/presentation/theme.dart';

class BusinessHowDidYouHear extends StatefulWidget {
  final String keyPrefix;

  const BusinessHowDidYouHear({super.key, this.keyPrefix = 'bn'});

  @override
  BusinessHowDidYouHearState createState() {
    return BusinessHowDidYouHearState();
  }
}

class BusinessHowDidYouHearState extends State<BusinessHowDidYouHear> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(8),
      padding: EdgeInsets.zero,
      width: MediaQuery.of(context).size.width,
      decoration: BoxDecoration(
        shape: BoxShape.rectangle,
        borderRadius: const BorderRadius.all(Radius.circular(jsoBorderRadius)),
        border: Border.all(color: jsoCardBorder, width: jsoCardBorderWidth),
      ),
      child: Padding(
          padding: const EdgeInsets.all(8),
          child: SingleChildScrollView(
              child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Padding(
                  padding: const EdgeInsets.fromLTRB(8, 0, 8, 8),
                  child: DropdownButtonFormField<String>(
                      key:
                          ValueKey('${widget.keyPrefix}_BusinessHowDidYouHear'),
                      value: 'a',
                      items: ['a', 'b', 'c'].map((source) {
                        return DropdownMenuItem(
                          value: source,
                          child: Text(source),
                        );
                      }).toList(),
                      onChanged: (String? source) => {})),
            ],
          ))),
    );
  }
}

[ReallySmallSoftware]

Out of interest, I have changed to a DropDownMenu and that seems to work OK