From 5ed5e2edf43e659f1a15e482900323179fc4190e Mon Sep 17 00:00:00 2001
From: Julian Waller <git@julusian.co.uk>
Date: Wed, 3 Jul 2024 22:12:57 +0100
Subject: [PATCH] wip: fix

---
 webui/src/Buttons/index.tsx             |  5 ++++-
 webui/src/Components/TextInputField.tsx | 11 +++++++----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/webui/src/Buttons/index.tsx b/webui/src/Buttons/index.tsx
index c81228716..8998fdeaa 100644
--- a/webui/src/Buttons/index.tsx
+++ b/webui/src/Buttons/index.tsx
@@ -69,6 +69,9 @@ export const ButtonsPage = observer(function ButtonsPage({ hotPress }: ButtonsPa
 		(e: React.KeyboardEvent) => {
 			const isControlOrCommandCombo = (e.ctrlKey || e.metaKey) && !e.altKey
 
+			// e.target is the actual element where the event happened, e.currentTarget is the element where the event listener is attached
+			const targetElement = e.target as HTMLElement
+
 			if (isControlOrCommandCombo && e.key === '=') {
 				e.preventDefault()
 				gridZoomController.zoomIn(true)
@@ -78,7 +81,7 @@ export const ButtonsPage = observer(function ButtonsPage({ hotPress }: ButtonsPa
 			} else if (isControlOrCommandCombo && e.key === '0') {
 				e.preventDefault()
 				gridZoomController.zoomReset()
-			} else if (e.currentTarget.tagName !== 'INPUT' && e.currentTarget.tagName !== 'TEXTAREA') {
+			} else if (targetElement.tagName !== 'INPUT' && targetElement.tagName !== 'TEXTAREA') {
 				switch (e.key) {
 					case 'ArrowDown':
 						setSelectedButton((selectedButton) => {
diff --git a/webui/src/Components/TextInputField.tsx b/webui/src/Components/TextInputField.tsx
index b40484d7a..17314f834 100644
--- a/webui/src/Components/TextInputField.tsx
+++ b/webui/src/Components/TextInputField.tsx
@@ -359,7 +359,7 @@ const VariablesSelectContext = React.createContext({
 	blurClearValue: () => {},
 	title: undefined as string | undefined,
 	placeholder: undefined as string | undefined,
-	inputRef: { current: null } as React.MutableRefObject<HTMLInputElement | null>,
+	inputRef: { current: null } as React.MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null>,
 })
 
 const CustomOption = React.memo((props: OptionProps<DropdownChoiceInt>) => {
@@ -459,7 +459,9 @@ const CustomValueContainerTextInput = React.memo((props: ValueContainerProps<Dro
 	return (
 		<SelectComponents.ValueContainer {...props} isDisabled>
 			<CFormInput
-				ref={context.inputRef}
+				ref={(elm) => {
+					context.inputRef.current = elm
+				}}
 				type="text"
 				style={context.extraStyle}
 				title={context.title}
@@ -487,8 +489,9 @@ const CustomValueContainerTextarea = React.memo((props: ValueContainerProps<Drop
 	return (
 		<SelectComponents.ValueContainer {...props} isDisabled>
 			<CFormTextarea
-				innerRef={context.inputRef}
-				type="text"
+				ref={(elm) => {
+					context.inputRef.current = elm
+				}}
 				style={context.extraStyle}
 				title={context.title}
 				value={context.value}