refactor: generate uniq id on the control level

Author: logaretm

packages/core/src/useTextField/useTextControl.ts

@@ -1,19 +1,20 @@
 import { shallowRef, toValue } from 'vue';
 import { InputEvents, Reactivify } from '../types';
-import { normalizeProps, propsToValues, useCaptureProps } from '../utils/common';
+import { normalizeProps, propsToValues, useCaptureProps, useUniqId } from '../utils/common';
 import { TextControlProps } from './types';
 import { useInputValidity } from '../validation';
 import { FieldState, useFieldStateInjection } from '../useFieldState';
 import { FormField, useFormFieldInjection } from '../useFormField';
+import { FieldTypePrefixes } from '../constants';
 
 interface FormControlContext {
-  inputId: string;
   field?: FormField;
   state?: FieldState<string | undefined>;
 }
 
 export function useTextControl(_props: Reactivify<TextControlProps>, ctx?: FormControlContext) {
   const inputEl = shallowRef<HTMLInputElement>();
+  const inputId = useUniqId(FieldTypePrefixes.TextField);
   const props = normalizeProps(_props);
   const field = ctx?.field ?? useFormFieldInjection();
   const state = ctx?.state ?? useFieldStateInjection<string | undefined>();
@@ -30,7 +31,7 @@ export function useTextControl(_props: Reactivify<TextControlProps>, ctx?: FormC
   if (field) {
     field.registerControl({
       getControlElement: () => inputEl.value,
-      getControlId: () => toValue(ctx?.inputId),
+      getControlId: () => inputId,
     });
   }
 
@@ -50,7 +51,7 @@ export function useTextControl(_props: Reactivify<TextControlProps>, ctx?: FormC
     return {
       ...propsToValues(props, ['name', 'type', 'placeholder', 'autocomplete', 'required', 'readonly']),
       ...handlers,
-      id: toValue(ctx?.inputId) ?? undefined,
+      id: inputId,
       ...field?.accessibleErrorProps.value,
       ...field?.describedByProps.value,
       ...field?.labelledByProps.value,

packages/core/src/useTextField/useTextField.ts

@@ -1,11 +1,10 @@
 import { toValue } from 'vue';
 import { registerField } from '@formwerk/devtools';
-import { normalizeProps, useUniqId } from '../utils/common';
+import { normalizeProps } from '../utils/common';
 import { Reactivify } from '../types/common';
 import { useFieldState, exposeField } from '../useFieldState';
 import { TextControlProps } from './types';
 import { useTextControl } from './useTextControl';
-import { FieldTypePrefixes } from '../constants';
 import { useFormField } from '../useFormField';
 
 export interface TextFieldProps extends TextControlProps {
@@ -21,7 +20,6 @@ export interface TextFieldProps extends TextControlProps {
 
 export function useTextField(_props: Reactivify<TextFieldProps, 'schema'>) {
   const props = normalizeProps(_props, ['schema']);
-
   const state = useFieldState<string | undefined>({
     path: props.name,
     initialValue: toValue(props.modelValue) ?? toValue(props.value),
@@ -37,9 +35,7 @@ export function useTextField(_props: Reactivify<TextFieldProps, 'schema'>) {
     state,
   );
 
-  const inputId = useUniqId(FieldTypePrefixes.TextField);
-
-  const { inputEl, inputProps } = useTextControl(props, { state, field, inputId });
+  const { inputEl, inputProps } = useTextControl(props, { state, field });
 
   if (__DEV__) {
     registerField(state, 'Text');