SizeInput: better handle input focus effect for mouse and touch

The input slider handle now animates in response to
mousedown/touchstart, and returns to its initial state on
mouseup/touchend. This does not break existing behaviour when navigating
via keyboard.

src/components/SizeInput/SizeInput.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback } from "react";
 import { useRecoilState } from "recoil";
 
 import { iconSizeAtom } from "../../state/atoms";
@@ -6,17 +6,29 @@ import "./SizeInput.css";
 
 type SizeInputProps = {};
 
+const handleFocus = (event: React.UIEvent<HTMLInputElement>) => {
+  const { currentTarget } = event;
+  currentTarget.focus();
+};
+
+const handleBlur = (event: React.UIEvent<HTMLInputElement>) => {
+  event.currentTarget.blur();
+};
+
 const SizeInput: React.FC<SizeInputProps> = () => {
   const [size, setSize] = useRecoilState(iconSizeAtom);
 
-  const handleSizeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const {
-      target: { value },
-    } = event;
-    const sizeInput = parseInt(value);
+  const handleSizeChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const {
+        target: { value },
+      } = event;
+      const sizeInput = parseInt(value);
 
-    if (sizeInput > 0) setSize(sizeInput);
-  };
+      if (sizeInput > 0) setSize(sizeInput);
+    },
+    [setSize]
+  );
 
   return (
     <div className="size-bar">
@@ -29,6 +41,9 @@ const SizeInput: React.FC<SizeInputProps> = () => {
         min={16}
         max={96}
         onChange={handleSizeChange}
+        onTouchStart={handleFocus}
+        onTouchEnd={handleBlur}
+        onMouseUp={handleBlur}
         step={4}
       />
     </div>