Input field caret position problem in react

Question

Hey, everybody.

I'm new in web dev. I have a task on react to increase days in first part of string in input field by clicking 'ArrowUp' button. In addition mutable part (days) must be selected.

The problem is when I click the "ArrowUP" caret(|) return to the start position of string and selected(setSelectedRange) is disabled. How do I make fixed selection position and increase value of days? Hope I was able to explain the problem.

PS: If I remove inputEl.current.selectionStart === 1, it seems it work, but I need to check caret position to change other parts of input ()

My code

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

const cur_date = new Date();

const def_day = cur_date.getDate();
const def_month = cur_date.getMonth();
const def_year = cur_date.getFullYear();
const def_hour = cur_date.getHours();
const def_minute = cur_date.getMinutes();
const def_seconds = cur_date.getSeconds();

/* const months = {
  1: "January",
  2: "February",
  3: "March",
  4: "April",
  5: "May",
  6: "June",
  7: "July",
  8: "August",
  9: "September",
  10: "October",
  11: "November",
  12: "December",
}; */

const DataInput = () => {
  const [milisec, setMilisec] = useState(cur_date.valueOf());
  const [date, setDate] = useState({
    day: def_day,
    month: def_month,
    year: def_year,
    hour: def_hour,
    minute: def_minute,
    second: def_seconds,
  });

  const { day, month, year, hour, minute, second } = date;
  const date_format = `${("0" + day).slice(
    -2
  )}/${month}/${year} ${hour}:${minute}:${second}`;

  const inputEl = useRef();
  const [selection, setSelection] = useState({});

  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.code === "ArrowUp" && inputEl.current.selectionStart === 1) {
      setSelection({ start: 0, end: 2 });
      setMilisec((prevState) => prevState + 86400000);
      setDate((prevState) => {
        return { ...prevState, day: new Date(milisec).getDate() };
      });
    }
  };

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

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

export default DataInput;

Answer 1

I figured out the problem.

1. Need to set interval like inputEl.current.selectionStart < 2
2. Before change milisec in state I need it change manually.

Answer 2

Actually, I'm not used to use selectionStart & selectionEnd

But I think ...if you press ArrowUp key, event.preventDefault() is may work.