Fix bug where input fields would not be active due to unloaded element

frontend/src/ui/inputs/Input/Input.js

@@ -1,4 +1,4 @@
-import { ensureString, processOptions } from 'step-wise/util'
+import { ensureString, processOptions, resolveFunctionsShallow } from 'step-wise/util'
 
 import { defaultFieldRegistrationOptions, defaultUseFormParameterOptions } from 'ui/form'
 
@@ -21,10 +21,11 @@ export const defaultInputOptions = {
 export function Input(options) {
 	// Process and extract the given options.
 	options = processOptions(options, defaultInputOptions)
-	let { id, children, readOnly, contextData } = options
+	let { id, element, children, readOnly, contextData } = options
 	id = ensureValidInputId(id)
 	readOnly = useReadOnlyValue(readOnly)
-	options = { ...options, readOnly }
+	element = resolveFunctionsShallow(element) // The element may be a getter function.
+	options = { ...options, readOnly, element }
 
 	// Use handlers to register the input field in the right places.
 	const [FI, setFI] = useFormRegistration(options)

frontend/src/ui/inputs/fieldInputs/FieldInput/FieldInput.js

@@ -65,7 +65,7 @@ export const FieldInput = forwardRef((options, ref) => {
 	// Set up the Input field settings.
 	const inputOptions = {
 		...filterOptions(options, defaultInputOptions),
-		element: ref.current?.field, // Inform the input field which element it should monitor.
+		element: () => ref.current?.field, // Inform the input field which element it should monitor. Turn this into a function, because these objects may not be updated as much as child components may be rerendered.
 		contextData: { ...options.contextData, inputFieldRef: ref, cursorRef }, // Add the input field ref to the input field context so inner elements can access it.
 	}