fix: select all text on budget input focus

fix #21
Xiphe · Apr 30, 2020 · 1b6b6f5 · 1b6b6f5
1 parent 45bb988
commit 1b6b6f5
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 10 deletions.
diff --git a/src/views/Month/BudgetInput.tsx b/src/views/Month/BudgetInput.tsx
@@ -9,20 +9,31 @@ type Props = {
   onChange: (ev: { amount: number; id: string }) => void;
 };
 
+function select({ target }: React.FocusEvent<HTMLInputElement>) {
+  setTimeout(() => {
+    target.select();
+  }, 0);
+}
+
 export default function BudgetInput({
   onChange,
   value,
   numberFormatter,
   categoryId,
 }: Props) {
-  const props = useAmountInputProps({
-    numberFormatter,
-    value,
-    onChange: useCallback(
-      (amount: number) => onChange({ amount, id: categoryId }),
-      [categoryId, onChange],
-    ),
-  });
-
-  return <input {...props} className={styles.budgetInput} type="string" />;
+  return (
+    <input
+      {...useAmountInputProps({
+        numberFormatter,
+        value,
+        onChange: useCallback(
+          (amount: number) => onChange({ amount, id: categoryId }),
+          [categoryId, onChange],
+        ),
+      })}
+      onFocus={select}
+      className={styles.budgetInput}
+      type="string"
+    />
+  );
 }
diff --git a/src/views/Month/Month.module.scss b/src/views/Month/Month.module.scss
@@ -127,6 +127,7 @@
     @include focusOutline();
     cursor: text;
     z-index: 15;
+    color: var(--main-color);
     outline: none;
     background-color: var(--background-color);
   }