fix: replace key event

Author: cc-hearts

components/input/OTP/OTPInput.tsx

@@ -14,6 +14,7 @@ export default defineComponent({
     value: { type: String, default: undefined },
     mask: { type: [Boolean, String], default: false },
     onChange: { type: Function as PropType<(index: number, value: string) => void> },
+    onActiveChange: Function as PropType<(nextIndex: number) => void>,
   },
   setup(props, { attrs, expose }) {
     const inputRef = shallowRef();
@@ -27,8 +28,7 @@ export default defineComponent({
         inputRef.value.select();
       });
     };
-    const handleSyncMouseDown = e => {
-      e.preventDefault();
+    const handleSyncMouseDown = () => {
       syncSelection();
     };
     // ======================= Event handlers =================
@@ -41,6 +41,30 @@ export default defineComponent({
       syncSelection();
     };
 
+    const activeSelection = () => {
+      if (document.activeElement === inputRef.value.input.input) {
+        syncSelection();
+      }
+    };
+
+    const onInternalKeydown = ({ key }) => {
+      if (key === 'ArrowLeft') {
+        props.onActiveChange(props.index - 1);
+      } else if (key === 'ArrowRight') {
+        props.onActiveChange(props.index + 1);
+      }
+
+      activeSelection();
+    };
+
+    const onInternalKeyUp = ({ key }) => {
+      if (key === 'Backspace' && !props.value) {
+        props.onActiveChange(props.index - 1);
+      }
+
+      activeSelection();
+    };
+
     expose({
       focus,
     });
@@ -55,8 +79,8 @@ export default defineComponent({
         onInput={onInternalChange}
         onMousedown={handleSyncMouseDown}
         onMouseUp={handleSyncMouseDown}
-        onKeydown={syncSelection}
-        onKeyup={syncSelection}
+        onKeydown={onInternalKeydown}
+        onKeyup={onInternalKeyUp}
       />
     );
   },

components/input/OTP/index.tsx

@@ -67,6 +67,10 @@ export default defineComponent({
     };
 
     // ======================= Change handlers =================
+    const onInputActiveChange = (nextIndex: number) => {
+      refs.value[nextIndex]?.focus();
+    };
+
     const onInputChange = (index: number, value: string) => {
       const nextValueCells = patchValue(index, value);
       const nextIndex = Math.min(index + value.length, props.length);
@@ -111,6 +115,7 @@ export default defineComponent({
                 value={singleValue}
                 htmlSize={1}
                 onChange={onInputChange}
+                onActiveChange={onInputActiveChange}
                 autofocus={index === 0 && autofocus}
               />
             );

components/vc-input/Input.tsx

@@ -65,7 +65,7 @@ export default defineComponent({
     expose({
       focus,
       blur,
-      input: computed(() => (inputRef.value.input as any)?.input),
+      input: computed(() => inputRef.value.input),
       stateValue,
       setSelectionRange,
       select,