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?
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;
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