fix(ui): canvas sliders

- Set an empty title to prevent browsers from showing "Please match the requested format." when hovering the number input - Fix issue w/ `z-index` that prevented the popover button from being clicked while the input was focused
invoke-ai · Oct 9, 2024 · dd53660 · dd53660
1 parent 09b19e3
commit dd53660
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 4 deletions.
diff --git a/...es/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarOpacity.tsx b/...es/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarOpacity.tsx
@@ -157,7 +157,7 @@ export const EntityListSelectedEntityActionBarOpacity = memo(() => {
             clampValueOnBlur={false}
             variant="outline"
           >
-            <NumberInputField paddingInlineEnd={7} _focusVisible={{ zIndex: 0 }} />
+            <NumberInputField paddingInlineEnd={7} _focusVisible={{ zIndex: 0 }} title="" />
             <PopoverTrigger>
               <IconButton
                 aria-label="open-slider"

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolBrushWidth.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolBrushWidth.tsx
@@ -164,7 +164,7 @@ export const ToolBrushWidth = memo(() => {
             onKeyDown={onKeyDown}
             clampValueOnBlur={false}
           >
-            <NumberInputField paddingInlineEnd={7} />
+            <NumberInputField _focusVisible={{ zIndex: 0 }} title="" paddingInlineEnd={7} />
             <PopoverTrigger>
               <IconButton
                 aria-label="open-slider"

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolEraserWidth.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolEraserWidth.tsx
@@ -167,7 +167,7 @@ export const ToolEraserWidth = memo(() => {
             onKeyDown={onKeyDown}
             clampValueOnBlur={false}
           >
-            <NumberInputField paddingInlineEnd={7} />
+            <NumberInputField _focusVisible={{ zIndex: 0 }} title="" paddingInlineEnd={7} />
             <PopoverTrigger>
               <IconButton
                 aria-label="open-slider"

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarScale.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarScale.tsx
@@ -132,7 +132,7 @@ export const CanvasToolbarScale = memo(() => {
             onKeyDown={onKeyDown}
             clampValueOnBlur={false}
           >
-            <NumberInputField paddingInlineEnd={7} />
+            <NumberInputField paddingInlineEnd={7} title="" _focusVisible={{ zIndex: 0 }} />
             <PopoverTrigger>
               <IconButton
                 aria-label="open-slider"