From aea83a493d5aadd1c9e16eeb269214a8a460acb4 Mon Sep 17 00:00:00 2001 From: Batuhan Tomo Date: Tue, 7 May 2024 16:57:27 +0300 Subject: [PATCH 1/4] Fix #6584: _locale fix --- components/lib/inputnumber/InputNumber.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/lib/inputnumber/InputNumber.js b/components/lib/inputnumber/InputNumber.js index d5224ddb69..b5a4385d04 100644 --- a/components/lib/inputnumber/InputNumber.js +++ b/components/lib/inputnumber/InputNumber.js @@ -1133,7 +1133,7 @@ export const InputNumber = React.memo( useUpdateEffect(() => { constructParser(); changeValue(); - }, [props.locale, props.localeMatcher, props.mode, props.currency, props.currencyDisplay, props.useGrouping, props.minFractionDigits, props.maxFractionDigits, props.suffix, props.prefix]); + }, [_locale, props.locale, props.localeMatcher, props.mode, props.currency, props.currencyDisplay, props.useGrouping, props.minFractionDigits, props.maxFractionDigits, props.suffix, props.prefix]); useUpdateEffect(() => { changeValue(); From d2772b388f2f435bd3481c6f926d74b60422d58c Mon Sep 17 00:00:00 2001 From: Batuhan Tomo Date: Tue, 7 May 2024 16:57:46 +0300 Subject: [PATCH 2/4] Revert "Fix #6584: _locale fix" This reverts commit aea83a493d5aadd1c9e16eeb269214a8a460acb4. --- components/lib/inputnumber/InputNumber.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/lib/inputnumber/InputNumber.js b/components/lib/inputnumber/InputNumber.js index b5a4385d04..d5224ddb69 100644 --- a/components/lib/inputnumber/InputNumber.js +++ b/components/lib/inputnumber/InputNumber.js @@ -1133,7 +1133,7 @@ export const InputNumber = React.memo( useUpdateEffect(() => { constructParser(); changeValue(); - }, [_locale, props.locale, props.localeMatcher, props.mode, props.currency, props.currencyDisplay, props.useGrouping, props.minFractionDigits, props.maxFractionDigits, props.suffix, props.prefix]); + }, [props.locale, props.localeMatcher, props.mode, props.currency, props.currencyDisplay, props.useGrouping, props.minFractionDigits, props.maxFractionDigits, props.suffix, props.prefix]); useUpdateEffect(() => { changeValue(); From c1040674cb97e02bf895845c9070f35f3b2b19ac Mon Sep 17 00:00:00 2001 From: Batuhan Tomo Date: Fri, 24 May 2024 10:34:54 +0300 Subject: [PATCH 3/4] Fix #6662: autocomplete value selection fix --- components/lib/inputnumber/InputNumber.js | 53 +++-------------------- 1 file changed, 7 insertions(+), 46 deletions(-) diff --git a/components/lib/inputnumber/InputNumber.js b/components/lib/inputnumber/InputNumber.js index 617f5f8218..daee72c8e8 100644 --- a/components/lib/inputnumber/InputNumber.js +++ b/components/lib/inputnumber/InputNumber.js @@ -368,14 +368,13 @@ export const InputNumber = React.memo( if (event.altKey || event.ctrlKey || event.metaKey) { isSpecialChar.current = true; - return; } if (props.onKeyDown) { props.onKeyDown(event); - // do not continue if the user defined event wants to prevent + // Do not continue if the user-defined event wants to prevent if (event.defaultPrevented) { return; } @@ -394,37 +393,25 @@ export const InputNumber = React.memo( let newValueStr = null; switch (event.code) { - //up case 'ArrowUp': spin(event, 1); event.preventDefault(); break; - - //down case 'ArrowDown': spin(event, -1); event.preventDefault(); break; - - //left case 'ArrowLeft': if (!isNumeralChar(inputValue.charAt(selectionStart - 1))) { event.preventDefault(); } - break; - - //right case 'ArrowRight': if (!isNumeralChar(inputValue.charAt(selectionStart))) { event.preventDefault(); } - break; - - //enter and tab case 'Tab': - case 'NumpadEnter': case 'Enter': case 'NumpadEnter': newValueStr = validateValue(parseValue(inputValue)); @@ -432,24 +419,18 @@ export const InputNumber = React.memo( inputRef.current.setAttribute('aria-valuenow', newValueStr); updateModel(event, newValueStr); break; - - //backspace case 'Backspace': event.preventDefault(); - if (selectionStart === selectionEnd) { const deleteChar = inputValue.charAt(selectionStart - 1); - if (isNumeralChar(deleteChar)) { const { decimalCharIndex, decimalCharIndexWithoutPrefix } = getDecimalCharIndexes(inputValue); const decimalLength = getDecimalLength(inputValue); - if (_group.current.test(deleteChar)) { _group.current.lastIndex = 0; newValueStr = inputValue.slice(0, selectionStart - 2) + inputValue.slice(selectionStart - 1); } else if (_decimal.current.test(deleteChar)) { _decimal.current.lastIndex = 0; - if (decimalLength) { inputRef.current.setSelectionRange(selectionStart - 1, selectionStart - 1); } else { @@ -457,7 +438,6 @@ export const InputNumber = React.memo( } } else if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) { const insertedText = isDecimalMode() && (props.minFractionDigits || 0) < decimalLength ? '' : '0'; - newValueStr = inputValue.slice(0, selectionStart - 1) + insertedText + inputValue.slice(selectionStart); } else if (decimalCharIndexWithoutPrefix === 1) { newValueStr = inputValue.slice(0, selectionStart - 1) + '0' + inputValue.slice(selectionStart); @@ -467,37 +447,28 @@ export const InputNumber = React.memo( } } else if (_currency.current.test(deleteChar)) { const { minusCharIndex, currencyCharIndex } = getCharIndexes(inputValue); - if (minusCharIndex === currencyCharIndex - 1) { newValueStr = inputValue.slice(0, minusCharIndex) + inputValue.slice(selectionStart); } } - updateValue(event, newValueStr, null, 'delete-single'); } else { newValueStr = deleteRange(inputValue, selectionStart, selectionEnd); updateValue(event, newValueStr, null, 'delete-range'); } - break; - - // del case 'Delete': event.preventDefault(); - if (selectionStart === selectionEnd) { const deleteChar = inputValue.charAt(selectionStart); const { decimalCharIndex, decimalCharIndexWithoutPrefix } = getDecimalCharIndexes(inputValue); - if (isNumeralChar(deleteChar)) { const decimalLength = getDecimalLength(inputValue); - if (_group.current.test(deleteChar)) { _group.current.lastIndex = 0; newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 2); } else if (_decimal.current.test(deleteChar)) { _decimal.current.lastIndex = 0; - if (decimalLength) { inputRef.current.setSelectionRange(selectionStart + 1, selectionStart + 1); } else { @@ -505,7 +476,6 @@ export const InputNumber = React.memo( } } else if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) { const insertedText = isDecimalMode() && (props.minFractionDigits || 0) < decimalLength ? '' : '0'; - newValueStr = inputValue.slice(0, selectionStart) + insertedText + inputValue.slice(selectionStart + 1); } else if (decimalCharIndexWithoutPrefix === 1) { newValueStr = inputValue.slice(0, selectionStart) + '0' + inputValue.slice(selectionStart + 1); @@ -514,43 +484,34 @@ export const InputNumber = React.memo( newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 1); } } - updateValue(event, newValueStr, null, 'delete-back-single'); } else { newValueStr = deleteRange(inputValue, selectionStart, selectionEnd); updateValue(event, newValueStr, null, 'delete-range'); } - break; - case 'End': event.preventDefault(); - if (!ObjectUtils.isEmpty(props.max)) { updateModel(event, props.max); } - break; case 'Home': event.preventDefault(); - if (!ObjectUtils.isEmpty(props.min)) { updateModel(event, props.min); } - break; - default: event.preventDefault(); - let char = event.key; - const _isDecimalSign = isDecimalSign(char); - const _isMinusSign = isMinusSign(char); - - if (((event.code.startsWith('Digit') || event.code.startsWith('Numpad')) && Number(char) >= 0 && Number(char) <= 9) || _isMinusSign || _isDecimalSign) { - insert(event, char, { isDecimalSign: _isDecimalSign, isMinusSign: _isMinusSign }); + if (char) { + const _isDecimalSign = isDecimalSign(char); + const _isMinusSign = isMinusSign(char); + if ((event.code && (event.code.startsWith('Digit') || event.code.startsWith('Numpad')) && Number(char) >= 0 && Number(char) <= 9) || _isMinusSign || _isDecimalSign) { + insert(event, char, { isDecimalSign: _isDecimalSign, isMinusSign: _isMinusSign }); + } } - break; } }; From e311332f977bbbbaadd07d634725175511db1d53 Mon Sep 17 00:00:00 2001 From: Batuhan Tomo Date: Fri, 24 May 2024 10:42:35 +0300 Subject: [PATCH 4/4] Fix #6662: fix lint --- components/lib/inputnumber/InputNumber.js | 40 +++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/components/lib/inputnumber/InputNumber.js b/components/lib/inputnumber/InputNumber.js index daee72c8e8..91ed25eafd 100644 --- a/components/lib/inputnumber/InputNumber.js +++ b/components/lib/inputnumber/InputNumber.js @@ -368,6 +368,7 @@ export const InputNumber = React.memo( if (event.altKey || event.ctrlKey || event.metaKey) { isSpecialChar.current = true; + return; } @@ -393,24 +394,35 @@ export const InputNumber = React.memo( let newValueStr = null; switch (event.code) { + //up case 'ArrowUp': spin(event, 1); event.preventDefault(); break; + + //down case 'ArrowDown': spin(event, -1); event.preventDefault(); break; + + //left case 'ArrowLeft': if (!isNumeralChar(inputValue.charAt(selectionStart - 1))) { event.preventDefault(); } + break; + + //right case 'ArrowRight': if (!isNumeralChar(inputValue.charAt(selectionStart))) { event.preventDefault(); } + break; + + //enter and tab case 'Tab': case 'Enter': case 'NumpadEnter': @@ -419,18 +431,24 @@ export const InputNumber = React.memo( inputRef.current.setAttribute('aria-valuenow', newValueStr); updateModel(event, newValueStr); break; + + //backspace case 'Backspace': event.preventDefault(); + if (selectionStart === selectionEnd) { const deleteChar = inputValue.charAt(selectionStart - 1); + if (isNumeralChar(deleteChar)) { const { decimalCharIndex, decimalCharIndexWithoutPrefix } = getDecimalCharIndexes(inputValue); const decimalLength = getDecimalLength(inputValue); + if (_group.current.test(deleteChar)) { _group.current.lastIndex = 0; newValueStr = inputValue.slice(0, selectionStart - 2) + inputValue.slice(selectionStart - 1); } else if (_decimal.current.test(deleteChar)) { _decimal.current.lastIndex = 0; + if (decimalLength) { inputRef.current.setSelectionRange(selectionStart - 1, selectionStart - 1); } else { @@ -438,6 +456,7 @@ export const InputNumber = React.memo( } } else if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) { const insertedText = isDecimalMode() && (props.minFractionDigits || 0) < decimalLength ? '' : '0'; + newValueStr = inputValue.slice(0, selectionStart - 1) + insertedText + inputValue.slice(selectionStart); } else if (decimalCharIndexWithoutPrefix === 1) { newValueStr = inputValue.slice(0, selectionStart - 1) + '0' + inputValue.slice(selectionStart); @@ -447,28 +466,37 @@ export const InputNumber = React.memo( } } else if (_currency.current.test(deleteChar)) { const { minusCharIndex, currencyCharIndex } = getCharIndexes(inputValue); + if (minusCharIndex === currencyCharIndex - 1) { newValueStr = inputValue.slice(0, minusCharIndex) + inputValue.slice(selectionStart); } } + updateValue(event, newValueStr, null, 'delete-single'); } else { newValueStr = deleteRange(inputValue, selectionStart, selectionEnd); updateValue(event, newValueStr, null, 'delete-range'); } + break; + + // del case 'Delete': event.preventDefault(); + if (selectionStart === selectionEnd) { const deleteChar = inputValue.charAt(selectionStart); const { decimalCharIndex, decimalCharIndexWithoutPrefix } = getDecimalCharIndexes(inputValue); + if (isNumeralChar(deleteChar)) { const decimalLength = getDecimalLength(inputValue); + if (_group.current.test(deleteChar)) { _group.current.lastIndex = 0; newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 2); } else if (_decimal.current.test(deleteChar)) { _decimal.current.lastIndex = 0; + if (decimalLength) { inputRef.current.setSelectionRange(selectionStart + 1, selectionStart + 1); } else { @@ -476,6 +504,7 @@ export const InputNumber = React.memo( } } else if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) { const insertedText = isDecimalMode() && (props.minFractionDigits || 0) < decimalLength ? '' : '0'; + newValueStr = inputValue.slice(0, selectionStart) + insertedText + inputValue.slice(selectionStart + 1); } else if (decimalCharIndexWithoutPrefix === 1) { newValueStr = inputValue.slice(0, selectionStart) + '0' + inputValue.slice(selectionStart + 1); @@ -484,34 +513,45 @@ export const InputNumber = React.memo( newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 1); } } + updateValue(event, newValueStr, null, 'delete-back-single'); } else { newValueStr = deleteRange(inputValue, selectionStart, selectionEnd); updateValue(event, newValueStr, null, 'delete-range'); } + break; + case 'End': event.preventDefault(); + if (!ObjectUtils.isEmpty(props.max)) { updateModel(event, props.max); } + break; case 'Home': event.preventDefault(); + if (!ObjectUtils.isEmpty(props.min)) { updateModel(event, props.min); } + break; + default: event.preventDefault(); let char = event.key; + if (char) { const _isDecimalSign = isDecimalSign(char); const _isMinusSign = isMinusSign(char); + if ((event.code && (event.code.startsWith('Digit') || event.code.startsWith('Numpad')) && Number(char) >= 0 && Number(char) <= 9) || _isMinusSign || _isDecimalSign) { insert(event, char, { isDecimalSign: _isDecimalSign, isMinusSign: _isMinusSign }); } } + break; } };