From 4fb8e5a64bfd2fea6de26347f3b352a777ae293b Mon Sep 17 00:00:00 2001
From: Steven Roussey <sroussey@gmail.com>
Date: Mon, 5 Feb 2024 16:36:49 -0800
Subject: [PATCH] Restrict input types to that get rendered to HTML to not
 generate HTML errors

---
 lib/components/NodeBaseInputField.tsx              | 5 ++++-
 lib/components/NodeInputField.tsx                  | 6 ++++--
 lib/stories/NodeGraphEditorCustomInput.stories.tsx | 6 +++---
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/lib/components/NodeBaseInputField.tsx b/lib/components/NodeBaseInputField.tsx
index c8b94f2..8515629 100644
--- a/lib/components/NodeBaseInputField.tsx
+++ b/lib/components/NodeBaseInputField.tsx
@@ -1,7 +1,10 @@
 import { CSSProperties, memo, ReactNode, useRef, useState } from 'react'
 import { NodeInputConfig } from '../config'
 
-type NodeBaseInputFieldProps = Pick<NodeInputConfig, 'valueType' | 'name'> & {
+export type InputHTMLTypes = 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'month' | 'number' | 'password' | 'range' | 'reset' | 'tel' | 'text' | 'time' | 'url' | 'week'
+
+type NodeBaseInputFieldProps = Pick<NodeInputConfig, 'name'> & {
+  valueType: InputHTMLTypes
   value: any
   style?: CSSProperties
   inputStyle?: CSSProperties
diff --git a/lib/components/NodeInputField.tsx b/lib/components/NodeInputField.tsx
index b6480fc..f054534 100644
--- a/lib/components/NodeInputField.tsx
+++ b/lib/components/NodeInputField.tsx
@@ -1,11 +1,13 @@
 import { memo } from 'react'
-import { NodeBaseInputField } from './NodeBaseInputField'
+import { InputHTMLTypes, NodeBaseInputField } from './NodeBaseInputField'
 import { useNodeFieldValue } from '../hooks/node'
 import { NodeInputConfig, ValueTypeConfig } from '../config'
 import { BaseInputProps } from './inputs.ts'
 import './NodeInputField.css'
 
-type NodeInputFieldProps = BaseInputProps & NodeInputConfig & ValueTypeConfig
+type NodeInputFieldProps = BaseInputProps & Omit<NodeInputConfig, 'valueType'> & ValueTypeConfig & {
+  valueType: InputHTMLTypes
+}
 
 export const NodeInputField = memo(
   ({ onFocus, onBlur, isConstant, slots, ...props }: NodeInputFieldProps) => {
diff --git a/lib/stories/NodeGraphEditorCustomInput.stories.tsx b/lib/stories/NodeGraphEditorCustomInput.stories.tsx
index dce8f9b..1f92a71 100644
--- a/lib/stories/NodeGraphEditorCustomInput.stories.tsx
+++ b/lib/stories/NodeGraphEditorCustomInput.stories.tsx
@@ -19,9 +19,9 @@ const meta = {
           }}
         >
           {Handle && <Handle />}
-          <NodeInputField {...config} name="X" id="x" />
-          <NodeInputField {...config} name="Y" id="y" />
-          <NodeInputField {...config} name="Z" id="z" />
+          <NodeInputField {...config} valueType="number" name="X" id="x" />
+          <NodeInputField {...config} valueType="number" name="Y" id="y" />
+          <NodeInputField {...config} valueType="number" name="Z" id="z" />
         </div>
       )
     }