Fixed length arrays: add a getFixedLengthFieldList(length: number) alongside getFieldList()

[adam1658]

I have an array of inputs I'd like to use, where the length is always constant (i.e. no add / remove buttons on the array items).

To get the correct number of items in the array, I'm currently setting defaultValue as follows:

const [form, fields] = useForm({
  defaultValue: {
    myArrayField: Array(10).fill('')
  },
});

Then I can use fields.myArrayField.getFieldList() to render the 10 inputs (without adding add or remove buttons).

I wonder if a getFixedLengthFieldList(length: number) method would be useful? It'd be a version of getFieldList() that gets an explicit length passed, rather than looking at the defaultValue / internal state.

Here's an idea of how it might look (not tested at all).

diff --git a/packages/conform-react/context.tsx b/packages/conform-react/context.tsx
--- packages/conform-react/context.tsx
+++ packages/conform-react/context.tsx
@@ -86,8 +86,9 @@
 	? {}
 	: [Schema] extends [Array<infer Item> | null | undefined]
 	? {
 			getFieldList: () => Array<FieldMetadata<Item, FormSchema, FormError>>;
+			getFixedLengthFieldList: (length: number) => Array<FieldMetadata<Item, FormSchema, FormError>>;
 	  }
 	: [Schema] extends [Record<string, any> | null | undefined]
 	? {
 			getFieldset: () => Required<{
@@ -349,8 +350,27 @@
 								getFieldMetadata(formId, state, subjectRef, name, index),
 							);
 					};
 				}
+				case 'getFixedLengthFieldList': {
+					return (length: number) => {
+						const initialValue = state.initialValue[name] ?? Array(length).fill('');
+
+						updateSubjectRef(subjectRef, name, 'initialValue', 'name');
+
+						if (!Array.isArray(initialValue)) {
+							throw new Error(
+								'The initial value at the given name is not a list',
+							);
+						}
+
+						return Array(length) // use provided length
+							.fill(0)
+							.map((_, index) =>
+								getFieldMetadata(formId, state, subjectRef, name, index),
+							);
+					};
+				}
 			}
 
 			return Reflect.get(metadata, key, receiver);
 		},