From d73badb7c1111071103c1dcc69ce06ecca8220de Mon Sep 17 00:00:00 2001
From: Steven Roussey <sroussey@gmail.com>
Date: Mon, 12 Feb 2024 20:33:28 -0800
Subject: [PATCH] fix: passing all props included NodeConfig resulted in flood
 of react html errors in the console (#42)

---
 lib/components/NodeBaseInputField.tsx | 18 ++++++++++++++++--
 lib/components/NodeInputField.tsx     | 13 +++++++------
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/lib/components/NodeBaseInputField.tsx b/lib/components/NodeBaseInputField.tsx
index 52afda1..baab414 100644
--- a/lib/components/NodeBaseInputField.tsx
+++ b/lib/components/NodeBaseInputField.tsx
@@ -19,7 +19,14 @@ export const NodeBaseInputField = ({
   onPointerDown,
   onPointerLeave,
   children,
-  ...props
+  inputMode,
+  pattern,
+  maxLength,
+  minLength,
+  max,
+  min,
+  step,
+  placeholder,
 }: NodeBaseInputFieldProps) => {
   const [labelVisible, setLabelVisible] = useState(true)
   const ref = useRef<HTMLInputElement>(null)
@@ -45,7 +52,6 @@ export const NodeBaseInputField = ({
     >
       {children}
       <input
-        {...props}
         ref={ref}
         style={{
           background: '#545555',
@@ -71,6 +77,14 @@ export const NodeBaseInputField = ({
         }}
         onPointerDown={onPointerDown}
         onPointerLeave={onPointerLeave}
+        inputMode={inputMode}
+        pattern={pattern}
+        maxLength={maxLength}
+        minLength={minLength}
+        max={max}
+        min={min}
+        step={step}
+        placeholder={placeholder}
       />
       {labelVisible ? (
         <div
diff --git a/lib/components/NodeInputField.tsx b/lib/components/NodeInputField.tsx
index 0be0b04..efea6d9 100644
--- a/lib/components/NodeInputField.tsx
+++ b/lib/components/NodeInputField.tsx
@@ -1,13 +1,12 @@
 import { useCallback, useEffect, useState } from 'react'
 import { NodeBaseInputField } from './NodeBaseInputField'
 import { useNodeFieldValue } from '../hooks/node'
-import { NodeInputConfig, ValueTypeConfig } from '../config'
+import { NodeInputConfig } from '../config'
 import { BaseInputProps } from './inputs.ts'
 import './NodeInputField.css'
 
 type NodeInputFieldProps = BaseInputProps &
-  Omit<NodeInputConfig, 'valueType'> &
-  ValueTypeConfig &
+  Pick<NodeInputConfig, 'isConstant' | 'id' | 'defaultValue' | 'name'> &
   React.InputHTMLAttributes<any>
 
 export const NodeInputField = ({
@@ -16,10 +15,12 @@ export const NodeInputField = ({
   type,
   isConstant,
   slots,
+  id,
+  defaultValue,
   ...props
 }: NodeInputFieldProps) => {
   const Handle = slots?.Handle
-  const [value, setValue] = useNodeFieldValue(props.id, props.defaultValue)
+  const [value, setValue] = useNodeFieldValue(id, defaultValue)
 
   return (
     <NodeBaseInputField
@@ -95,7 +96,7 @@ export const NodeInputDecimalField = ({
 type NodeInputTypedFieldProps = Omit<NodeInputFieldProps, 'type'>
 
 export const NodeInputTextField = (
-  props: NodeInputTypedFieldProps & { maxlength?: number; minlength?: number },
+  props: NodeInputTypedFieldProps & { maxLength?: number; minLength?: number },
 ) => {
   return <NodeInputField type="text" {...props} />
 }
@@ -107,7 +108,7 @@ export const NodeInputNumberField = (
 }
 
 export const NodeInputPasswordField = (
-  props: NodeInputTypedFieldProps & { maxlength?: number; minlength?: number },
+  props: NodeInputTypedFieldProps & { maxLength?: number; minLength?: number },
 ) => {
   return <NodeInputField type="password" {...props} />
 }