From e7370e5ef390ef7dde82b4a88e5049d94a053335 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 8 Jul 2023 17:16:34 +1000
Subject: [PATCH] fix(ui): fix readonly inputs

There was a props on IAISlider to make the input component readonly - I didn't know this existed and at some point used a component with that prop as a template for other sliders, copying the flag over.

It's not actually used anywhere, so I removed the prop entirely, enabling the number inputs everywhere.
---
 invokeai/frontend/web/src/common/components/IAISlider.tsx     | 4 +---
 .../IAICanvasToolbar/IAICanvasToolChooserOptions.tsx          | 1 -
 .../components/ParamDynamicPromptsMaxPrompts.tsx              | 1 -
 .../Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx  | 1 -
 .../Parameters/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx   | 1 -
 .../Parameters/Canvas/InfillAndScaling/ParamScaledHeight.tsx  | 1 -
 .../Parameters/Canvas/InfillAndScaling/ParamScaledWidth.tsx   | 1 -
 .../UnifiedCanvasToolSettings/UnifiedCanvasBrushSize.tsx      | 1 -
 8 files changed, 1 insertion(+), 10 deletions(-)

diff --git a/invokeai/frontend/web/src/common/components/IAISlider.tsx b/invokeai/frontend/web/src/common/components/IAISlider.tsx
index d923f2ad2d..49ea980612 100644
--- a/invokeai/frontend/web/src/common/components/IAISlider.tsx
+++ b/invokeai/frontend/web/src/common/components/IAISlider.tsx
@@ -56,7 +56,6 @@ export type IAIFullSliderProps = {
   withInput?: boolean;
   isInteger?: boolean;
   inputWidth?: string | number;
-  inputReadOnly?: boolean;
   withReset?: boolean;
   handleReset?: () => void;
   tooltipSuffix?: string;
@@ -90,7 +89,6 @@ const IAISlider = (props: IAIFullSliderProps) => {
     withInput = false,
     isInteger = false,
     inputWidth = 16,
-    inputReadOnly = false,
     withReset = false,
     hideTooltip = false,
     isCompact = false,
@@ -152,6 +150,7 @@ const IAISlider = (props: IAIFullSliderProps) => {
   );
 
   const handleInputChange = useCallback((v: number | string) => {
+    console.log('input');
     setLocalInputValue(v);
   }, []);
 
@@ -311,7 +310,6 @@ const IAISlider = (props: IAIFullSliderProps) => {
             {...sliderNumberInputProps}
           >
             <NumberInputField
-              readOnly={inputReadOnly}
               minWidth={inputWidth}
               {...sliderNumberInputFieldProps}
             />
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx
index eee462dd2d..794b8ba795 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx
@@ -235,7 +235,6 @@ const IAICanvasToolChooserOptions = () => {
               withInput
               onChange={(newSize) => dispatch(setBrushSize(newSize))}
               sliderNumberInputProps={{ max: 500 }}
-              inputReadOnly={false}
             />
           </Flex>
           <IAIColorPicker
diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsMaxPrompts.tsx b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsMaxPrompts.tsx
index 172120fd1e..d8b5721fbe 100644
--- a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsMaxPrompts.tsx
+++ b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsMaxPrompts.tsx
@@ -51,7 +51,6 @@ const ParamDynamicPromptsMaxPrompts = () => {
       sliderNumberInputProps={{ max: inputMax }}
       withSliderMarks
       withInput
-      inputReadOnly
       withReset
       handleReset={handleReset}
     />
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx
index dc83ba8907..b529c87225 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx
@@ -59,7 +59,6 @@ const ParamBoundingBoxWidth = () => {
       sliderNumberInputProps={{ max: 4096 }}
       withSliderMarks
       withInput
-      inputReadOnly
       withReset
       handleReset={handleResetHeight}
     />
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx
index e3ee3d5368..07d74049ed 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx
@@ -59,7 +59,6 @@ const ParamBoundingBoxWidth = () => {
       sliderNumberInputProps={{ max: 4096 }}
       withSliderMarks
       withInput
-      inputReadOnly
       withReset
       handleReset={handleResetWidth}
     />
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaledHeight.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaledHeight.tsx
index a7e4a926b8..2cd70c4445 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaledHeight.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaledHeight.tsx
@@ -58,7 +58,6 @@ const ParamScaledHeight = () => {
       sliderNumberInputProps={{ max: 4096 }}
       withSliderMarks
       withInput
-      inputReadOnly
       withReset
       handleReset={handleResetScaledHeight}
     />
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaledWidth.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaledWidth.tsx
index 8104140808..acceaeb9a2 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaledWidth.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaledWidth.tsx
@@ -56,7 +56,6 @@ const ParamScaledWidth = () => {
       sliderNumberInputProps={{ max: 4096 }}
       withSliderMarks
       withInput
-      inputReadOnly
       withReset
       handleReset={handleResetScaledWidth}
     />
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasBrushSize.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasBrushSize.tsx
index 5117505826..0792b787cd 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasBrushSize.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasBrushSize.tsx
@@ -48,7 +48,6 @@ export default function UnifiedCanvasBrushSize() {
       withInput
       onChange={(newSize) => dispatch(setBrushSize(newSize))}
       sliderNumberInputProps={{ max: 500 }}
-      inputReadOnly={false}
       isCompact
     />
   );