fix(ui): fix readonly inputs (#3689)

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

@@ -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}
             />

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

invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsMaxPrompts.tsx

@@ -51,7 +51,6 @@ const ParamDynamicPromptsMaxPrompts = () => {
       sliderNumberInputProps={{ max: inputMax }}
       withSliderMarks
       withInput
-      inputReadOnly
       withReset
       handleReset={handleReset}
     />

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}
     />

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}
     />

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}
     />

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}
     />

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
     />
   );