fix input bug

.moon/tasks.yml

@@ -1,8 +1,5 @@
 $schema: 'https://moonrepo.dev/schemas/tasks.json'
 
-implicitDeps:
-  - '^:build'
-
 implicitInputs:
   - 'package.json'
 

packages/elements/src/Input/Input.tsx

@@ -1,40 +1,7 @@
-import { type Accessor, type JSX, createEffect, createRenderEffect, splitProps } from 'solid-js';
-
-declare module 'solid-js' {
-  namespace JSX {
-    interface DirectiveFunctions {
-      field: typeof field;
-    }
-  }
-}
+import { type JSX } from 'solid-js';
 
 export type InputProps = JSX.InputHTMLAttributes<HTMLInputElement>;
-type DirectiveProps = Pick<InputProps, 'value' | 'onInput' | 'onBlur'>;
-
-function field(element: HTMLInputElement, props: Accessor<DirectiveProps>) {
-  createRenderEffect(() => {
-    element.value = (props().value ?? '')?.toString();
-  });
-
-  createEffect(() => {
-    const onInput = props().onInput;
-    if (onInput) {
-      element.addEventListener<'beforeinput'>(
-        'beforeinput',
-        onInput as (this: HTMLInputElement, ev: InputEvent) => unknown
-      );
-    }
-  });
-
-  createEffect(() => {
-    const onBlur = props().onBlur;
-    if (onBlur) {
-      element.addEventListener<'blur'>('blur', onBlur as (this: HTMLInputElement, ev: FocusEvent) => unknown);
-    }
-  });
-}
 
-export function Input(initialProps: InputProps) {
-  const [directiveProps, props] = splitProps(initialProps, ['value', 'onInput', 'onBlur']);
-  return <input use:field={directiveProps} {...props} />;
+export function Input(props: InputProps) {
+  return <input {...props} />;
 }

packages/elements/src/Textarea/Textarea.tsx

@@ -1,43 +1,7 @@
-import { type Accessor, type JSX, createEffect, createRenderEffect, splitProps } from 'solid-js';
-
-declare module 'solid-js' {
-  namespace JSX {
-    interface DirectiveFunctions {
-      textareaField: typeof textareaField;
-    }
-  }
-}
+import { type JSX } from 'solid-js';
 
 export type TextareaElementProps = JSX.TextareaHTMLAttributes<HTMLTextAreaElement>;
-type DirectiveProps = Pick<TextareaElementProps, 'value' | 'onInput' | 'onBlur'>;
-
-function textareaField(element: HTMLTextAreaElement, props: Accessor<DirectiveProps>) {
-  createRenderEffect(() => {
-    element.value = (props().value ?? '')?.toString();
-  });
-
-  createEffect(() => {
-    const onInput = props().onInput;
-    if (onInput) {
-      element.addEventListener<'beforeinput'>(
-        'beforeinput',
-        onInput as (this: HTMLTextAreaElement, ev: InputEvent) => unknown
-      );
-    }
-  });
-
-  createEffect(() => {
-    const onBlur = props().onBlur;
-    if (onBlur) {
-      element.addEventListener<'blur'>(
-        'blur',
-        onBlur as (this: HTMLTextAreaElement, ev: FocusEvent) => unknown
-      );
-    }
-  });
-}
 
-export function Textarea(initialProps: TextareaElementProps) {
-  const [directiveProps, props] = splitProps(initialProps, ['value', 'onInput', 'onBlur']);
-  return <textarea use:textareaField={directiveProps} {...props} />;
+export function Textarea(props: TextareaElementProps) {
+  return <textarea {...props} />;
 }

packages/fields/src/hooks/useFormField.ts

@@ -162,8 +162,6 @@ export function useFormField<G extends FormElementTag, M extends FieldValueMappi
   const props = mergeProps(useFormFieldDefaultProps, initialProps);
   const [formState, formStateMutations] = useFormContext<M>();
 
-  const { isLoading } = formState;
-
   const isSelectable = props.checked !== undefined;
   const isInitialized = formState.hasFieldBeenInitialized(props.name);
   const value = createMemo(() => formState.getFieldValue(props.name));
@@ -196,7 +194,7 @@ export function useFormField<G extends FormElementTag, M extends FieldValueMappi
   const newProps = mergeProps(props, {
     id: props.name,
     value: formattedValue(),
-    disabled: !!(!props.name || isLoading),
+    disabled: !!(!props.name || formState.isLoading),
     errors: getDisplayableErrors(props.name, formState),
     checked: currentChecked,
     isInitialized,