Test for typeahead controller

rollup.config.mjs

@@ -26,7 +26,7 @@ const plugins = [
   terser({
     output: { comments: false },
     compress: {
-      drop_console: true,
+      drop_console: false,
     },
   }),
 ];

src/lib/Form.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode, useMemo } from "react";
 import { DeepPartial, FieldValues, Resolver, SubmitHandler, useForm, UseFormReturn } from "react-hook-form";
 import { jsonIsoDateReviver } from "./helpers/dateUtils";
 import { FormContext, FormContextProps } from "./context/FormContext";
@@ -80,8 +80,41 @@ const Form = <T extends FieldValues>({
   const formMethods = useForm<T>({ resolver, defaultValues: revivedDefaultValues });
   const autoSubmitHandler = useAutoSubmit({ onSubmit, formMethods, autoSubmitConfig });
 
+  // Memoize the object passed to function children to avoid creating new reference each render
+  const formPropsForChildren = useMemo(
+    () => ({
+      ...formMethods,
+      disabled,
+      requiredFields,
+      hideValidationMessages,
+      disableAriaAutocomplete,
+    }),
+    [formMethods, disabled, requiredFields, hideValidationMessages, disableAriaAutocomplete],
+  );
+
+  // Memoize context value to prevent unnecessary re-renders of context consumers
+  const contextValue = useMemo(
+    () => ({
+      requiredFields,
+      disabled,
+      hideValidationMessages,
+      disableAriaAutocomplete,
+      ...formMethods,
+    }),
+    [formMethods, requiredFields, disabled, hideValidationMessages, disableAriaAutocomplete],
+  );
+
+  // Only recompute children if the props object changes
+  const resolvedChildren = useMemo(
+    () => (typeof children === "function" ? children(formPropsForChildren) : children),
+    [children, formPropsForChildren],
+  );
+
+  console.log("Rendering Form", { contextValue });
+  console.log("Rendering Form", { formPropsForChildren });
+
   return (
-    <FormContext.Provider value={{ requiredFields, disabled, hideValidationMessages, disableAriaAutocomplete, ...formMethods }}>
+    <FormContext.Provider value={contextValue}>
       <form
         ref={(elem) => {
           if (formRef) {
@@ -92,9 +125,7 @@ const Form = <T extends FieldValues>({
         method="POST"
         autoComplete={autoComplete}
       >
-        {children instanceof Function
-          ? children({ ...formMethods, disabled, requiredFields, hideValidationMessages, disableAriaAutocomplete })
-          : children}
+        {resolvedChildren}
       </form>
     </FormContext.Provider>
   );

src/lib/StaticTypeaheadInput.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable max-lines */
 import { useEffect, useMemo, useState } from "react";
-import { FieldValues, useController } from "react-hook-form";
+import { FieldValues, Controller } from "react-hook-form";
 import { useSafeNameId } from "src/lib/hooks/useSafeNameId";
 import { CommonTypeaheadProps, StaticTypeaheadAutocompleteProps, TypeaheadOption, TypeaheadOptions } from "./types/Typeahead";
 import { useFormContext } from "./context/FormContext";
@@ -29,8 +29,7 @@ interface StaticTypeaheadInputProps<T extends FieldValues> extends CommonTypeahe
   autocompleteProps?: StaticTypeaheadAutocompleteProps;
 }
 
-// eslint-disable-next-line complexity
-const StaticTypeaheadInput = <T extends FieldValues>(props: StaticTypeaheadInputProps<T>) => {
+const AutoComplete = <T extends FieldValues>(props: StaticTypeaheadInputProps<T>) => {
   const {
     options,
     multiple,
@@ -66,143 +65,148 @@ const StaticTypeaheadInput = <T extends FieldValues>(props: StaticTypeaheadInput
     fixedOptions,
     withFixedOptionsInValue = true,
     innerRef,
+    name,
+    id,
   } = props;
 
   const [page, setPage] = useState(1);
   const [loadMoreOptions, setLoadMoreOptions] = useState(limitResults !== undefined && limitResults < options.length);
 
-  const { name, id } = useSafeNameId(props.name ?? "", props.id);
-  const { control, disabled: formDisabled, getFieldState, clearErrors, watch } = useFormContext();
-  const {
-    field: { ref, ...field },
-  } = useController({
-    name,
-    control,
-    rules: {
-      validate: {
-        required: () => getFieldState(name)?.error?.message,
-      },
-    },
-  });
+  const { control, disabled: formDisabled, clearErrors } = useFormContext<T>();
 
   const isDisabled = useMemo(() => formDisabled || disabled, [formDisabled, disabled]);
   const paginatedOptions = useMemo(
     () => (limitResults === undefined ? options : options.slice(0, page * limitResults)),
     [limitResults, page, options],
   );
 
-  const fieldValue = watch(name) as string | number | string[] | number[] | undefined;
-  const value = useMemo(
-    () =>
-      multiple
-        ? getMultipleAutoCompleteValue(combineOptions(options, fixedOptions), fieldValue as string[] | number[] | undefined)
-        : getSingleAutoCompleteValue(options, fieldValue as string | number | undefined),
-    [fieldValue, multiple, options, fixedOptions],
-  );
-
-  validateFixedOptions(fixedOptions, multiple, autocompleteProps, withFixedOptionsInValue, value);
+  // Validate fixed options upfront
+  useEffect(() => {
+    validateFixedOptions(fixedOptions, multiple, autocompleteProps, withFixedOptionsInValue, []);
+  }, [fixedOptions, multiple, autocompleteProps, withFixedOptionsInValue]);
 
   useEffect(() => {
     if (limitResults !== undefined) {
       setLoadMoreOptions(page * limitResults < options.length);
     }
   }, [options, page, limitResults]);
 
+  return (
+    <Controller
+      name={name}
+      control={control}
+      rules={{
+        validate: {
+          required: () => {
+            const fieldState = control.getFieldState(name);
+            return fieldState?.error?.message;
+          },
+        },
+      }}
+      render={({ field }) => {
+        const fieldValue = field.value;
+        const value = multiple
+          ? getMultipleAutoCompleteValue(combineOptions(options, fixedOptions), fieldValue as string[] | number[] | undefined)
+          : getSingleAutoCompleteValue(options, fieldValue as string | number | undefined);
+
+        return (
+          <Autocomplete<TypeaheadOption, boolean, boolean, boolean>
+            {...autocompleteProps}
+            {...field}
+            id={id}
+            multiple={multiple}
+            groupBy={useGroupBy ? groupOptions : undefined}
+            options={useGroupBy ? sortOptionsByGroup(paginatedOptions) : paginatedOptions}
+            isOptionEqualToValue={
+              autocompleteProps?.isOptionEqualToValue ??
+              ((option, value) => (typeof option === "string" ? option === value : option.value === (value as LabelValueOption).value))
+            }
+            getOptionKey={
+              autocompleteProps?.getOptionKey ??
+              ((option: TypeaheadOption) => (typeof option === "string" ? option : `${option.label}-${option.value ?? ""}`))
+            }
+            disableCloseOnSelect={multiple}
+            value={resolveInputValue(multiple, fixedOptions, withFixedOptionsInValue, value)}
+            getOptionLabel={(option: TypeaheadOption) => (typeof option === "string" ? option : option.label)}
+            getOptionDisabled={(option) =>
+              getOptionDisabled?.(option) ||
+              (useGroupBy && isDisabledGroup(option)) ||
+              (typeof option === "string" ? false : (option.disabled ?? false))
+            }
+            disabled={isDisabled}
+            readOnly={readOnly}
+            selectOnFocus={markAllOnFocus}
+            style={inputGroupStyle}
+            className={className}
+            autoSelect={autoSelect}
+            autoHighlight={autoHighlight}
+            onClose={readOnly ? undefined : onClose}
+            onOpen={readOnly ? undefined : onOpen}
+            onBlur={() => {
+              if (onBlur) {
+                onBlur();
+              }
+              field.onBlur();
+            }}
+            onChange={(_, selectedValue) => {
+              const optionsArray = getOptionsFromValue(selectedValue, fixedOptions, withFixedOptionsInValue);
+              const values = convertAutoCompleteOptionsToStringArray(optionsArray);
+              const finalValue = multiple ? values : values[0];
+              clearErrors(field.name);
+              if (onChange) {
+                onChange(finalValue);
+              }
+            }}
+            onInputChange={(_e, value, reason) => {
+              onInputChange?.(value, reason);
+            }}
+            renderOption={highlightOptions ? renderHighlightedOptionFunction : undefined}
+            renderInput={(params) => (
+              <TypeaheadTextField
+                {...params}
+                isLoading={isLoading}
+                name={name}
+                label={label}
+                addonLeft={addonLeft}
+                addonRight={addonRight}
+                addonProps={{ isDisabled }}
+                style={style}
+                hideValidationMessage={hideValidationMessage}
+                useBootstrapStyle={useBootstrapStyle}
+                helpText={helpText}
+                placeholder={multiple && value.length > 0 ? undefined : placeholder}
+                paginationIcon={paginationIcon}
+                paginationText={paginationText}
+                variant={variant}
+                limitResults={limitResults}
+                loadMoreOptions={loadMoreOptions}
+                setPage={setPage}
+                inputRef={(elem) => {
+                  if (innerRef) innerRef.current = elem as HTMLInputElement;
+                  field.ref(elem);
+                }}
+              />
+            )}
+            renderTags={createTagRenderer(fixedOptions, autocompleteProps)}
+          />
+        );
+      }}
+    />
+  );
+};
+
+const StaticTypeaheadInput = <T extends FieldValues>(props: StaticTypeaheadInputProps<T>) => {
+  const { label, useBootstrapStyle = false } = props;
+  const { name, id } = useSafeNameId(props.name ?? "", props.id);
+
   return (
     <FormGroupLayout
       name={name}
       label={useBootstrapStyle ? label : undefined}
       labelStyle={useBootstrapStyle ? { color: "#8493A5", fontSize: 14 } : undefined}
       layout="muiInput"
     >
-      <Autocomplete<TypeaheadOption, boolean, boolean, boolean>
-        {...autocompleteProps}
-        {...field}
-        id={id}
-        multiple={multiple}
-        groupBy={useGroupBy ? groupOptions : undefined}
-        options={useGroupBy ? sortOptionsByGroup(paginatedOptions) : paginatedOptions}
-        isOptionEqualToValue={
-          autocompleteProps?.isOptionEqualToValue ??
-          ((option, value) => (typeof option === "string" ? option === value : option.value === (value as LabelValueOption).value))
-        }
-        getOptionKey={
-          autocompleteProps?.getOptionKey ??
-          ((option: TypeaheadOption) => (typeof option === "string" ? option : `${option.label}-${option.value ?? ""}`))
-        }
-        disableCloseOnSelect={multiple}
-        value={resolveInputValue(multiple, fixedOptions, withFixedOptionsInValue, value)}
-        getOptionLabel={(option: TypeaheadOption) => (typeof option === "string" ? option : option.label)}
-        getOptionDisabled={(option) =>
-          getOptionDisabled?.(option) ||
-          (useGroupBy && isDisabledGroup(option)) ||
-          (typeof option === "string" ? false : (option.disabled ?? false))
-        }
-        disabled={isDisabled}
-        readOnly={readOnly}
-        selectOnFocus={markAllOnFocus}
-        style={inputGroupStyle}
-        className={className}
-        autoSelect={autoSelect}
-        autoHighlight={autoHighlight}
-        onClose={readOnly ? undefined : onClose}
-        onOpen={readOnly ? undefined : onOpen}
-        onBlur={() => {
-          if (onBlur) {
-            onBlur();
-          }
-          field.onBlur();
-        }}
-        onChange={(_, value) => {
-          // value is typed as Autocomplete<Value> (aka TypeaheadOption) or an array of Autocomplete<Value> (aka TypeaheadOption[])
-          // however, the component is not intended to be used with mixed types
-          const optionsArray = getOptionsFromValue(value, fixedOptions, withFixedOptionsInValue);
-          const values = convertAutoCompleteOptionsToStringArray(optionsArray);
-          const finalValue = multiple ? values : values[0];
-          clearErrors(field.name);
-          if (onChange) {
-            onChange(finalValue);
-          }
-          field.onChange(finalValue);
-        }}
-        onInputChange={(_e, value, reason) => {
-          if (onInputChange) {
-            onInputChange(value, reason);
-          }
-        }}
-        renderOption={highlightOptions ? renderHighlightedOptionFunction : undefined}
-        renderInput={(params) => (
-          <TypeaheadTextField
-            isLoading={isLoading}
-            name={name}
-            label={label}
-            addonLeft={addonLeft}
-            addonRight={addonRight}
-            addonProps={{
-              isDisabled,
-            }}
-            style={style}
-            hideValidationMessage={hideValidationMessage}
-            useBootstrapStyle={useBootstrapStyle}
-            helpText={helpText}
-            placeholder={multiple && value.length > 0 ? undefined : placeholder}
-            paginationIcon={paginationIcon}
-            paginationText={paginationText}
-            variant={variant}
-            limitResults={limitResults}
-            loadMoreOptions={loadMoreOptions}
-            setPage={setPage}
-            {...params}
-            inputRef={(elem) => {
-              if (innerRef) {
-                innerRef.current = elem as HTMLInputElement;
-              }
-              ref(elem);
-            }}
-          />
-        )}
-        renderTags={createTagRenderer(fixedOptions, autocompleteProps)}
-      />
+      <AutoComplete<T> {...props} id={id} name={props.name} />
     </FormGroupLayout>
   );
 };