Hello everyone. I am new in web dev. I just can't understand the problem. My task is to change the parts of the input (day, month and year) using a combination of ctr ArrowUp (increase) and ctr ArrowDown (decreases). Also the variable part is selected - this is achieved by tracking the position of the cursor (selectionStart). The code works, but when i want to increase or decrease "year" for some reason “OnKeyDown” is executed only once and other button presses have no effect. Why it happens?

SANDBOX SNIPPET

My Code

import React, { useState, useEffect, useRef } from "react";
import styles from "./DataInput.module.css";

const cur_date = new Date();

const DataInput = () => {
  const inputEl = useRef();
  const [selection, setSelection] = useState();
  const [currentDate, newCurrentDate] = useState();

  const date_format = cur_date
    .toLocaleString()
    .replaceAll(".", "/")
    .replace(",", "");

  const [value, setValue] = useState(date_format);

  useEffect(() => {
    if (!selection) return; // prevent running on start
    const { start, end } = selection;
    inputEl.current.focus();
    inputEl.current.setSelectionRange(start, end);
  }, [selection]);

  const keyHandler = (e) => {
    if (e.ctrlKey && e.key === "ArrowUp") {
      e.preventDefault();
      if (
        inputEl.current.selectionStart >= 0 &&
        inputEl.current.selectionStart <= 1
      ) {
        console.log("Selection confirm!");
        setSelection({ start: 0, end: 2 });
        const newDay = cur_date.setDate(cur_date.getDate()   1);
        setValue(
          new Date(newDay)
            .toLocaleString()
            .replaceAll(".", "/")
            .replace(",", "")
        );
      }
      if (
        inputEl.current.selectionStart >= 3 &&
        inputEl.current.selectionStart <= 4
      ) {
        setSelection({ start: 3, end: 5 });
        const newMonth = cur_date.setMonth(cur_date.getMonth()   1);
        setValue(
          new Date(newMonth)
            .toLocaleString()
            .replaceAll(".", "/")
            .replace(",", "")
        );
      }
      if (
        inputEl.current.selectionStart >= 7 &&
        inputEl.current.selectionStart <= 9
      ) {
        setSelection({ start: 6, end: 10 });
        const newYear = cur_date.setFullYear(cur_date.getFullYear()   1);
        setValue(
          new Date(newYear)
            .toLocaleString()
            .replaceAll(".", "/")
            .replace(",", "")
        );
      }
    }
    if (e.ctrlKey && e.key === "ArrowDown") {
      e.preventDefault();
      if (
        inputEl.current.selectionStart >= 0 &&
        inputEl.current.selectionStart <= 1
      ) {
        setSelection({ start: 0, end: 2 });
        let newDate = cur_date.setDate(cur_date.getDate() - 1);
        setValue(
          new Date(newDate)
            .toLocaleString()
            .replaceAll(".", "/")
            .replace(",", "")
        );
      }
      if (
        inputEl.current.selectionStart >= 3 &&
        inputEl.current.selectionStart <= 4
      ) {
        setSelection({ start: 3, end: 5 });
        const newMonth = cur_date.setMonth(cur_date.getMonth() - 1);
        setValue(
          new Date(newMonth)
            .toLocaleString()
            .replaceAll(".", "/")
            .replace(",", "")
        );
      }
      if (
        inputEl.current.selectionStart >= 7 &&
        inputEl.current.selectionStart <= 9
      ) {
        setSelection({ start: 6, end: 10 });
        const newYear = cur_date.setFullYear(cur_date.getFullYear() - 1);
        setValue(
          new Date(newYear)
            .toLocaleString()
            .replaceAll(".", "/")
            .replace(",", "")
        );
      }
    }
  };

  const changeHandler = (e) => {
    setValue(e.target.value);
  };

  return (
    <div className={styles.main}>
      <h1> Frontend Task</h1>
      <p id="name">Abramov David</p>
      <input
        ref={inputEl}
        value={value}
        onChange={changeHandler}
        onKeyDown={keyHandler}
      />
    </div>
  );
};

export default DataInput;

CodePudding user response：

The

  if (
    inputEl.current.selectionStart >= 7 &&
    inputEl.current.selectionStart <= 9
  )

should be

if (
    inputEl.current.selectionStart >= 6 &&
    inputEl.current.selectionStart <= 9
  )

so the range should be 6-9 and not 7-9