Merge pull request #201 from tiqi-group/200-trailing-zeros-removed-when-changing-numbers-with-arrow-keys-in-number-component

fix: Cursor jumps in NumberComponent when number is updated in the backend and frontend rerenders
This commit is contained in:
Mose Müller 2025-01-17 15:46:27 +01:00 committed by GitHub
commit 40a8863ecd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 14 additions and 17 deletions

View File

@ -199,16 +199,8 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
const { key, target } = event;
// Typecast
const inputTarget = target as HTMLInputElement;
if (
key === "F1" ||
key === "F5" ||
key === "F12" ||
key === "Tab" ||
key === "ArrowRight" ||
key === "ArrowLeft"
) {
if (key === "F1" || key === "F5" || key === "F12" || key === "Tab") {
return;
}
event.preventDefault();
@ -223,6 +215,11 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
// Select everything when pressing Ctrl + a
inputTarget.setSelectionRange(0, value.length);
return;
} else if (key === "ArrowRight" || key === "ArrowLeft") {
// Move the cursor with the arrow keys and store its position
selectionStart = key === "ArrowRight" ? selectionStart + 1 : selectionStart - 1;
setCursorPosition(selectionStart);
return;
} else if ((key >= "0" && key <= "9") || key === "-") {
// Check if a number key or a decimal point key is pressed
({ value: newValue, selectionStart } = handleNumericKey(

View File

@ -7,7 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site displaying a pydase UI." />
<script type="module" crossorigin src="/assets/index-BqF7l_R8.js"></script>
<script type="module" crossorigin src="/assets/index-B4RiTBEo.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-D2aktF3W.css">
</head>