From 8f5f38a37713838daa72e64c96e3494bf78b6ea9 Mon Sep 17 00:00:00 2001
From: Ash Keel <ash@nebula.cafe>
Date: Thu, 1 Dec 2022 16:53:48 +0100
Subject: [PATCH] fix: keep cursor in the correct position when cleaning up IDs

fixes #29
---
 .../ui/components/utils/ControlledInput.tsx   | 35 +++++++++++++++++++
 frontend/src/ui/pages/LoyaltyRewards.tsx      | 10 ++++--
 frontend/src/ui/theme/forms.ts                |  9 +++--
 3 files changed, 50 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/ui/components/utils/ControlledInput.tsx

diff --git a/frontend/src/ui/components/utils/ControlledInput.tsx b/frontend/src/ui/components/utils/ControlledInput.tsx
new file mode 100644
index 0000000..1fd807d
--- /dev/null
+++ b/frontend/src/ui/components/utils/ControlledInput.tsx
@@ -0,0 +1,35 @@
+// From https://stackoverflow.com/a/68928267
+// Allows to have a input with text manipulation (e.g. sanitation) without
+// messing with the cursor
+
+import React, { useState, useRef, useEffect } from 'react';
+
+const ControlledInput = (
+  props: React.DetailedHTMLProps<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    HTMLInputElement
+  >,
+) => {
+  const { value, onChange, ...rest } = props;
+  const [cursor, setCursor] = useState<number>(null);
+  const ref = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    const input = ref.current;
+    if (input) input.setSelectionRange(cursor, cursor);
+  }, [ref, cursor, value]);
+
+  return (
+    <input
+      ref={ref}
+      value={value}
+      onChange={(e) => {
+        setCursor(e.target.selectionStart);
+        if (onChange) onChange(e);
+      }}
+      {...rest}
+    />
+  );
+};
+
+export default ControlledInput;
diff --git a/frontend/src/ui/pages/LoyaltyRewards.tsx b/frontend/src/ui/pages/LoyaltyRewards.tsx
index 4c605d2..fd0d36f 100644
--- a/frontend/src/ui/pages/LoyaltyRewards.tsx
+++ b/frontend/src/ui/pages/LoyaltyRewards.tsx
@@ -12,6 +12,7 @@ import {
   Button,
   Checkbox,
   CheckboxIndicator,
+  ControlledInputBox,
   Dialog,
   DialogActions,
   Field,
@@ -268,6 +269,7 @@ function GoalItem({
 function RewardsPage() {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
+  const [cursorPosition, setCursorPosition] = useState(0);
   const [config] = useModule(modules.loyaltyConfig);
   const [rewards, setRewards] = useModule(modules.loyaltyRewards);
   const [filter, setFilter] = useState('');
@@ -343,13 +345,17 @@ function RewardsPage() {
               <Label htmlFor="reward-id">
                 {t('pages.loyalty-rewards.reward-id')}
               </Label>
-              <InputBox
+              <ControlledInputBox
                 id="reward-id"
                 type="text"
                 required
                 disabled={!dialogReward.new}
                 value={dialogReward?.reward?.id}
+                onFocus={(e) => {
+                  e.target.selectionStart = cursorPosition;
+                }}
                 onChange={(e) => {
+                  setCursorPosition(e.target.selectionStart);
                   setDialogReward({
                     ...dialogReward,
                     reward: {
@@ -671,7 +677,7 @@ function GoalsPage() {
               <Label htmlFor="goal-id">
                 {t('pages.loyalty-rewards.goal-id')}
               </Label>
-              <InputBox
+              <ControlledInputBox
                 id="goal-id"
                 type="text"
                 required
diff --git a/frontend/src/ui/theme/forms.ts b/frontend/src/ui/theme/forms.ts
index 472f269..4d075ce 100644
--- a/frontend/src/ui/theme/forms.ts
+++ b/frontend/src/ui/theme/forms.ts
@@ -1,8 +1,10 @@
 import * as UnstyledLabel from '@radix-ui/react-label';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as ToggleGroup from '@radix-ui/react-toggle-group';
+import { CSS } from '@stitches/react';
 import { styled } from './theme';
 import { theme } from '.';
+import ControlledInput from '../components/utils/ControlledInput';
 
 export const Field = styled('fieldset', {
   all: 'unset',
@@ -45,7 +47,7 @@ export const Label = styled(UnstyledLabel.Root, {
   fontWeight: 'bold',
 });
 
-export const InputBox = styled('input', {
+const inputStyles: CSS = {
   all: 'unset',
   fontWeight: '300',
   border: '1px solid $gray6',
@@ -74,7 +76,10 @@ export const InputBox = styled('input', {
       },
     },
   },
-});
+};
+
+export const InputBox = styled('input', inputStyles);
+export const ControlledInputBox = styled(ControlledInput, inputStyles);
 
 export const Textarea = styled('textarea', {
   all: 'unset',