Controlled collection for select component

[vincerubinetti]

I'm using the select component to have my own custom controlled or uncontrolled select component. I saw the section in the docs about controlled usage, so I moved my value and onValueChange from the machine initialization to the declarative context.

Then I had some weird issues when the options for the select were changing. A newly inserted option would render in the list visually but not be updated in the machine. Also, onValueChange would show details.value and details.items that were different/out-of-sync. So I also moved the collection to the context. But then TS still wanted collection to be defined in the machine, so I did this:

const collection = select.collection({
  items: options,
  itemToValue: blah,
  itemToString: blah,
});

const [state, send] = useMachine(
  select.machine({
    blah,
    blah,
    collection,
  }),
  {
    context: {
      collection,
      value: declarativeValue,
      onValueChange: () => blah,
    },
  }
);

So, I just wanted to make sure this is okay and check if there is a better recommended way to do this. Do you foresee any issue with defining the collection at the top like that and duplicating it between the machine and the context?

[segunadebayo]

It's okay to define the collection in both the initial context and the controlled context. The controlled context will override the initial context right after instantiation time.

[vincerubinetti]

Cool, thanks! Maybe I should just provide an empty collection to the machine then to make that explicit.