using fullAccessPath as Form name for NumberComponent fixing cursor jumps

This commit is contained in:
Mose Müller 2024-04-17 09:21:02 +02:00
parent f5e108bbe5
commit ec1f68ae4a

View File

@ -174,7 +174,6 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
// Create a state for the input string // Create a state for the input string
const [inputString, setInputString] = useState(value.toString()); const [inputString, setInputString] = useState(value.toString());
const renderCount = useRef(0); const renderCount = useRef(0);
const name = fullAccessPath.split('.').at(-1);
const handleKeyDown = (event) => { const handleKeyDown = (event) => {
const { key, target } = event; const { key, target } = event;
@ -329,7 +328,9 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
useEffect(() => { useEffect(() => {
// Set the cursor position after the component re-renders // Set the cursor position after the component re-renders
const inputElement = document.getElementsByName(name)[0] as HTMLInputElement; const inputElement = document.getElementsByName(
fullAccessPath
)[0] as HTMLInputElement;
if (inputElement && cursorPosition !== null) { if (inputElement && cursorPosition !== null) {
inputElement.setSelectionRange(cursorPosition, cursorPosition); inputElement.setSelectionRange(cursorPosition, cursorPosition);
} }
@ -351,7 +352,7 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
type="text" type="text"
value={inputString} value={inputString}
disabled={readOnly} disabled={readOnly}
name={name} name={fullAccessPath}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
onBlur={handleBlur} onBlur={handleBlur}
className={isInstantUpdate && !readOnly ? 'instantUpdate' : ''} className={isInstantUpdate && !readOnly ? 'instantUpdate' : ''}