Multiple sorted values in a single field

[oxc]

I'm having a hard time connecting my custom MultiAutocomplete component to conform-future. My initial implementation used useControl with a <select multiple>, but I noticed that the values no longer keep the order in which they were selected.

Also, I would like to introduce manual re-ordering of the selected values.

What would be the best way to connect this to conform future?

1. Having one field per selected value, and tracking inserts/reorders/removals separately via useIntent?
2. Storing the selection in useState, rendering a list of hidden fields for form submission, and not call any intents at all?
3. Something else?

[edmundhung]

The behavior you're seeing is native browser behavior. When you read from a <select multiple> (via selectedOptions or when FormData serializes it), the values follow DOM option order, not the order they were selected or specified.

Would a preserveOptionsOrder option on useControl work for your use case? When enabled, it would reorder the <option> elements in the DOM to match the order you pass to control.change(), and also preserve the defaultValue order on form reset:

const control = useControl({
  defaultValue: ['c', 'a', 'b'],
  preserveOptionsOrder: true,
});

// control.options returns ['c', 'a', 'b'] instead of DOM order ['a', 'b', 'c']

I tried implement it in #1147. Could you give the pre-release a try and let me know if it works for you?

[oxc]

Very nice, I tried the pre-release, and responded directly on the PR.

[edmundhung]

FYI, I feel like this solution is too limited (only works with string[]), and so I am working on extending useControl to handle any field shape through a <fieldset /> element. Will share more once I got it working exactly the way I want.

[oxc]

Thanks for the update! Looking forward to your new solution