Fix #3595: Add maxLength prop to InputNumber Component.

Fix typo on inputmask and autocomplete. Add doc and api generator value of maxLength prop to inputnumber.
primefaces · Nov 10, 2022 · 37138a4 · 37138a4
1 parent 141708e
commit 37138a4
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 4 deletions.
diff --git a/api-generator/components/autocomplete.js b/api-generator/components/autocomplete.js
@@ -162,7 +162,7 @@ const AutoCompleteProps = [
         description: 'When present, it specifies that the component should be disabled.'
     },
     {
-        name: 'maxlength',
+        name: 'maxLength',
         type: 'number',
         default: 'null',
         description: 'Maximum number of character allows in the input field.'

diff --git a/api-generator/components/inputmask.js b/api-generator/components/inputmask.js
@@ -66,7 +66,7 @@ const InputMaskProps = [
         description: 'Size of the input field.'
     },
     {
-        name: 'maxlength',
+        name: 'maxLength',
         type: 'number',
         default: 'null',
         description: 'Maximum number of character allows in the input field.'

diff --git a/api-generator/components/inputnumber.js b/api-generator/components/inputnumber.js
@@ -207,6 +207,12 @@ const InputNumberProps = [
         default: 'null',
         description: 'Size of the input field.'
     },
+    {
+        name: 'maxLength',
+        type: 'number',
+        default: 'null',
+        description: 'Maximum number of character allows in the input field.'
+    },
     {
         name: 'style',
         type: 'string',

diff --git a/components/doc/autocomplete/apidoc.js b/components/doc/autocomplete/apidoc.js
@@ -205,7 +205,7 @@ export function ApiDoc(props) {
                             <td>When present, it specifies that the component should be disabled.</td>
                         </tr>
                         <tr>
-                            <td>maxlength</td>
+                            <td>maxLength</td>
                             <td>number</td>
                             <td>null</td>
                             <td>Maximum number of character allows in the input field.</td>

diff --git a/components/doc/inputmask/apidoc.js b/components/doc/inputmask/apidoc.js
@@ -87,7 +87,7 @@ export function ApiDoc(props) {
                             <td>Size of the input field.</td>
                         </tr>
                         <tr>
-                            <td>maxlength</td>
+                            <td>maxLength</td>
                             <td>number</td>
                             <td>null</td>
                             <td>Maximum number of character allows in the input field.</td>

diff --git a/components/doc/inputnumber/apidoc.js b/components/doc/inputnumber/apidoc.js
@@ -239,6 +239,12 @@ export function ApiDoc(props) {
                             <td>null</td>
                             <td>Size of the input field.</td>
                         </tr>
+                        <tr>
+                            <td>maxLength</td>
+                            <td>number</td>
+                            <td>null</td>
+                            <td>Maximum number of character allows in the input field.</td>
+                        </tr>
                         <tr>
                             <td>style</td>
                             <td>string</td>

diff --git a/components/lib/inputnumber/InputNumber.js b/components/lib/inputnumber/InputNumber.js
@@ -199,6 +199,10 @@ export const InputNumber = React.memo(
                 let currentValue = parseValue(inputRef.current.value) || 0;
                 let newValue = validateValue(currentValue + step);
 
+                if (props.maxLength && props.maxLength < formatValue(newValue).length) {
+                    return;
+                }
+
                 // touch devices trigger the keyboard to display because of setSelectionRange
                 !DomHandler.isTouchDevice() && updateInput(newValue, null, 'spin');
                 updateModel(event, newValue);
@@ -809,6 +813,10 @@ export const InputNumber = React.memo(
                 let selectionStart = inputEl.selectionStart;
                 let selectionEnd = inputEl.selectionEnd;
 
+                if (props.maxLength && props.maxLength < newValue.length) {
+                    return;
+                }
+
                 inputEl.value = newValue;
                 let newLength = newValue.length;
 
@@ -1168,6 +1176,7 @@ InputNumber.defaultProps = {
     localeMatcher: undefined,
     max: null,
     maxFractionDigits: undefined,
+    maxLength: null,
     min: null,
     minFractionDigits: undefined,
     mode: 'decimal',

diff --git a/components/lib/inputnumber/inputnumber.d.ts b/components/lib/inputnumber/inputnumber.d.ts
@@ -47,6 +47,7 @@ export interface InputNumberProps extends Omit<React.DetailedHTMLProps<React.HTM
     step?: number;
     min?: number;
     max?: number;
+    maxLength?: number;
     disabled?: boolean;
     required?: boolean;
     tabIndex?: number;