From a0ccb4385fe8c9999bf815b6e9ca4570721e9d1c Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 8 Jul 2023 18:52:37 +1000
Subject: [PATCH] fix(ui): fix inconsistent shift modifier capture
The shift key listener didn't catch pressed when focused in a textarea or input field, causing jank on slider number inputs.
Add keydown and keyup listeners to all such fields, which ensures that the `shift` state is always correct.
Also add the action tracking it to `actionsDenylist` to not clutter up devtools.
---
.../middleware/devtools/actionsDenylist.ts | 1 +
.../web/src/common/components/IAIInput.tsx | 30 ++++++++++++++-
.../components/IAIMantineMultiSelect.tsx | 25 ++++++++++++-
.../common/components/IAIMantineSelect.tsx | 25 ++++++++++++-
.../src/common/components/IAINumberInput.tsx | 37 ++++++++++++++++++-
.../web/src/common/components/IAISlider.tsx | 25 ++++++++++++-
.../web/src/common/components/IAITextarea.tsx | 33 ++++++++++++++++-
7 files changed, 167 insertions(+), 9 deletions(-)
diff --git a/invokeai/frontend/web/src/app/store/middleware/devtools/actionsDenylist.ts b/invokeai/frontend/web/src/app/store/middleware/devtools/actionsDenylist.ts
index eb54868735..8a6e112d27 100644
--- a/invokeai/frontend/web/src/app/store/middleware/devtools/actionsDenylist.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/devtools/actionsDenylist.ts
@@ -9,4 +9,5 @@ export const actionsDenylist = [
'canvas/addPointToCurrentLine',
'socket/socketGeneratorProgress',
'socket/appSocketGeneratorProgress',
+ 'hotkeys/shiftKeyPressed',
];
diff --git a/invokeai/frontend/web/src/common/components/IAIInput.tsx b/invokeai/frontend/web/src/common/components/IAIInput.tsx
index 3cba36d2c9..d114fc5968 100644
--- a/invokeai/frontend/web/src/common/components/IAIInput.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIInput.tsx
@@ -5,8 +5,10 @@ import {
Input,
InputProps,
} from '@chakra-ui/react';
+import { useAppDispatch } from 'app/store/storeHooks';
import { stopPastePropagation } from 'common/util/stopPastePropagation';
-import { ChangeEvent, memo } from 'react';
+import { shiftKeyPressed } from 'features/ui/store/hotkeysSlice';
+import { ChangeEvent, KeyboardEvent, memo, useCallback } from 'react';
interface IAIInputProps extends InputProps {
label?: string;
@@ -25,6 +27,25 @@ const IAIInput = (props: IAIInputProps) => {
...rest
} = props;
+ const dispatch = useAppDispatch();
+ const handleKeyDown = useCallback(
+ (e: KeyboardEvent<HTMLInputElement>) => {
+ if (e.shiftKey) {
+ dispatch(shiftKeyPressed(true));
+ }
+ },
+ [dispatch]
+ );
+
+ const handleKeyUp = useCallback(
+ (e: KeyboardEvent<HTMLInputElement>) => {
+ if (!e.shiftKey) {
+ dispatch(shiftKeyPressed(false));
+ }
+ },
+ [dispatch]
+ );
+
return (
<FormControl
isInvalid={isInvalid}
@@ -32,7 +53,12 @@ const IAIInput = (props: IAIInputProps) => {
{...formControlProps}
>
{label !== '' && <FormLabel>{label}</FormLabel>}
- <Input {...rest} onPaste={stopPastePropagation} />
+ <Input
+ {...rest}
+ onPaste={stopPastePropagation}
+ onKeyDown={handleKeyDown}
+ onKeyUp={handleKeyUp}
+ />
</FormControl>
);
};
diff --git a/invokeai/frontend/web/src/common/components/IAIMantineMultiSelect.tsx b/invokeai/frontend/web/src/common/components/IAIMantineMultiSelect.tsx
index 04bab3717a..e52ec63810 100644
--- a/invokeai/frontend/web/src/common/components/IAIMantineMultiSelect.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIMantineMultiSelect.tsx
@@ -1,7 +1,9 @@
import { Tooltip, useColorMode, useToken } from '@chakra-ui/react';
import { MultiSelect, MultiSelectProps } from '@mantine/core';
+import { useAppDispatch } from 'app/store/storeHooks';
import { useChakraThemeTokens } from 'common/hooks/useChakraThemeTokens';
-import { RefObject, memo } from 'react';
+import { shiftKeyPressed } from 'features/ui/store/hotkeysSlice';
+import { KeyboardEvent, RefObject, memo, useCallback } from 'react';
import { mode } from 'theme/util/mode';
type IAIMultiSelectProps = MultiSelectProps & {
@@ -11,6 +13,7 @@ type IAIMultiSelectProps = MultiSelectProps & {
const IAIMantineMultiSelect = (props: IAIMultiSelectProps) => {
const { searchable = true, tooltip, inputRef, ...rest } = props;
+ const dispatch = useAppDispatch();
const {
base50,
base100,
@@ -31,10 +34,30 @@ const IAIMantineMultiSelect = (props: IAIMultiSelectProps) => {
const [boxShadow] = useToken('shadows', ['dark-lg']);
const { colorMode } = useColorMode();
+ const handleKeyDown = useCallback(
+ (e: KeyboardEvent<HTMLInputElement>) => {
+ if (e.shiftKey) {
+ dispatch(shiftKeyPressed(true));
+ }
+ },
+ [dispatch]
+ );
+
+ const handleKeyUp = useCallback(
+ (e: KeyboardEvent<HTMLInputElement>) => {
+ if (!e.shiftKey) {
+ dispatch(shiftKeyPressed(false));
+ }
+ },
+ [dispatch]
+ );
+
return (
<Tooltip label={tooltip} placement="top" hasArrow isOpen={true}>
<MultiSelect
ref={inputRef}
+ onKeyDown={handleKeyDown}
+ onKeyUp={handleKeyUp}
searchable={searchable}
styles={() => ({
label: {
diff --git a/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx b/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx
index 8469af8fc8..80e6c24ace 100644
--- a/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx
@@ -1,7 +1,9 @@
import { Tooltip, useColorMode, useToken } from '@chakra-ui/react';
import { Select, SelectProps } from '@mantine/core';
+import { useAppDispatch } from 'app/store/storeHooks';
import { useChakraThemeTokens } from 'common/hooks/useChakraThemeTokens';
-import { memo } from 'react';
+import { shiftKeyPressed } from 'features/ui/store/hotkeysSlice';
+import { KeyboardEvent, memo, useCallback } from 'react';
import { mode } from 'theme/util/mode';
export type IAISelectDataType = {
@@ -16,6 +18,7 @@ type IAISelectProps = SelectProps & {
const IAIMantineSelect = (props: IAISelectProps) => {
const { searchable = true, tooltip, ...rest } = props;
+ const dispatch = useAppDispatch();
const {
base50,
base100,
@@ -36,11 +39,31 @@ const IAIMantineSelect = (props: IAISelectProps) => {
const { colorMode } = useColorMode();
+ const handleKeyDown = useCallback(
+ (e: KeyboardEvent<HTMLInputElement>) => {
+ if (e.shiftKey) {
+ dispatch(shiftKeyPressed(true));
+ }
+ },
+ [dispatch]
+ );
+
+ const handleKeyUp = useCallback(
+ (e: KeyboardEvent<HTMLInputElement>) => {
+ if (!e.shiftKey) {
+ dispatch(shiftKeyPressed(false));
+ }
+ },
+ [dispatch]
+ );
+
const [boxShadow] = useToken('shadows', ['dark-lg']);
return (
<Tooltip label={tooltip} placement="top" hasArrow>
<Select
+ onKeyDown={handleKeyDown}
+ onKeyUp={handleKeyUp}
searchable={searchable}
styles={() => ({
label: {
diff --git a/invokeai/frontend/web/src/common/components/IAINumberInput.tsx b/invokeai/frontend/web/src/common/components/IAINumberInput.tsx
index bf598f3b12..8f675cc148 100644
--- a/invokeai/frontend/web/src/common/components/IAINumberInput.tsx
+++ b/invokeai/frontend/web/src/common/components/IAINumberInput.tsx
@@ -14,10 +14,19 @@ import {
Tooltip,
TooltipProps,
} from '@chakra-ui/react';
+import { useAppDispatch } from 'app/store/storeHooks';
import { stopPastePropagation } from 'common/util/stopPastePropagation';
+import { shiftKeyPressed } from 'features/ui/store/hotkeysSlice';
import { clamp } from 'lodash-es';
-import { FocusEvent, memo, useEffect, useState } from 'react';
+import {
+ FocusEvent,
+ KeyboardEvent,
+ memo,
+ useCallback,
+ useEffect,
+ useState,
+} from 'react';
const numberStringRegex = /^-?(0\.)?\.?$/;
@@ -60,6 +69,8 @@ const IAINumberInput = (props: Props) => {
...rest
} = props;
+ const dispatch = useAppDispatch();
+
/**
* Using a controlled input with a value that accepts decimals needs special
* handling. If the user starts to type in "1.5", by the time they press the
@@ -109,6 +120,24 @@ const IAINumberInput = (props: Props) => {
onChange(clamped);
};
+ const handleKeyDown = useCallback(
+ (e: KeyboardEvent<HTMLInputElement>) => {
+ if (e.shiftKey) {
+ dispatch(shiftKeyPressed(true));
+ }
+ },
+ [dispatch]
+ );
+
+ const handleKeyUp = useCallback(
+ (e: KeyboardEvent<HTMLInputElement>) => {
+ if (!e.shiftKey) {
+ dispatch(shiftKeyPressed(false));
+ }
+ },
+ [dispatch]
+ );
+
return (
<Tooltip {...tooltipProps}>
<FormControl
@@ -128,7 +157,11 @@ const IAINumberInput = (props: Props) => {
{...rest}
onPaste={stopPastePropagation}
>
- <NumberInputField {...numberInputFieldProps} />
+ <NumberInputField
+ {...numberInputFieldProps}
+ onKeyDown={handleKeyDown}
+ onKeyUp={handleKeyUp}
+ />
{showStepper && (
<NumberInputStepper>
<NumberIncrementStepper {...numberInputStepperProps} />
diff --git a/invokeai/frontend/web/src/common/components/IAISlider.tsx b/invokeai/frontend/web/src/common/components/IAISlider.tsx
index 49ea980612..d99fbfa149 100644
--- a/invokeai/frontend/web/src/common/components/IAISlider.tsx
+++ b/invokeai/frontend/web/src/common/components/IAISlider.tsx
@@ -26,9 +26,12 @@ import {
} from '@chakra-ui/react';
import { clamp } from 'lodash-es';
+import { useAppDispatch } from 'app/store/storeHooks';
import { roundDownToMultiple } from 'common/util/roundDownToMultiple';
+import { shiftKeyPressed } from 'features/ui/store/hotkeysSlice';
import {
FocusEvent,
+ KeyboardEvent,
memo,
MouseEvent,
useCallback,
@@ -107,7 +110,7 @@ const IAISlider = (props: IAIFullSliderProps) => {
sliderIAIIconButtonProps,
...rest
} = props;
-
+ const dispatch = useAppDispatch();
const { t } = useTranslation();
const [localInputValue, setLocalInputValue] = useState<
@@ -167,6 +170,24 @@ const IAISlider = (props: IAIFullSliderProps) => {
}
}, []);
+ const handleKeyDown = useCallback(
+ (e: KeyboardEvent<HTMLInputElement>) => {
+ if (e.shiftKey) {
+ dispatch(shiftKeyPressed(true));
+ }
+ },
+ [dispatch]
+ );
+
+ const handleKeyUp = useCallback(
+ (e: KeyboardEvent<HTMLInputElement>) => {
+ if (!e.shiftKey) {
+ dispatch(shiftKeyPressed(false));
+ }
+ },
+ [dispatch]
+ );
+
return (
<FormControl
onClick={forceInputBlur}
@@ -310,6 +331,8 @@ const IAISlider = (props: IAIFullSliderProps) => {
{...sliderNumberInputProps}
>
<NumberInputField
+ onKeyDown={handleKeyDown}
+ onKeyUp={handleKeyUp}
minWidth={inputWidth}
{...sliderNumberInputFieldProps}
/>
diff --git a/invokeai/frontend/web/src/common/components/IAITextarea.tsx b/invokeai/frontend/web/src/common/components/IAITextarea.tsx
index b5247887bb..e29c6fe513 100644
--- a/invokeai/frontend/web/src/common/components/IAITextarea.tsx
+++ b/invokeai/frontend/web/src/common/components/IAITextarea.tsx
@@ -1,9 +1,38 @@
import { Textarea, TextareaProps, forwardRef } from '@chakra-ui/react';
+import { useAppDispatch } from 'app/store/storeHooks';
import { stopPastePropagation } from 'common/util/stopPastePropagation';
-import { memo } from 'react';
+import { shiftKeyPressed } from 'features/ui/store/hotkeysSlice';
+import { KeyboardEvent, memo, useCallback } from 'react';
const IAITextarea = forwardRef((props: TextareaProps, ref) => {
- return <Textarea ref={ref} onPaste={stopPastePropagation} {...props} />;
+ const dispatch = useAppDispatch();
+ const handleKeyDown = useCallback(
+ (e: KeyboardEvent<HTMLTextAreaElement>) => {
+ if (e.shiftKey) {
+ dispatch(shiftKeyPressed(true));
+ }
+ },
+ [dispatch]
+ );
+
+ const handleKeyUp = useCallback(
+ (e: KeyboardEvent<HTMLTextAreaElement>) => {
+ if (!e.shiftKey) {
+ dispatch(shiftKeyPressed(false));
+ }
+ },
+ [dispatch]
+ );
+
+ return (
+ <Textarea
+ ref={ref}
+ onPaste={stopPastePropagation}
+ onKeyDown={handleKeyDown}
+ onKeyUp={handleKeyUp}
+ {...props}
+ />
+ );
});
export default memo(IAITextarea);