From 0a1cc7b8971689413997ca9a851c2b67e88cdae9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Thu, 21 Apr 2022 10:54:13 +0300
Subject: [PATCH] Fixed #2469 - InputNumber new readonly attribute

---
 api-generator/components/inputnumber.js     |  6 ++++++
 src/components/inputnumber/InputNumber.d.ts |  4 ++++
 src/components/inputnumber/InputNumber.vue  | 22 +++++++++++++++++++--
 src/views/inputnumber/InputNumberDoc.vue    |  6 ++++++
 4 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/api-generator/components/inputnumber.js b/api-generator/components/inputnumber.js
index a26c001661..6cfaf9a735 100644
--- a/api-generator/components/inputnumber.js
+++ b/api-generator/components/inputnumber.js
@@ -131,6 +131,12 @@ const InputNumberProps = [
         default: "true",
         description: "Determines whether the input field is empty."
     },
+    {
+        name: "readonly",
+        type: "boolean",
+        default: "false",
+        description: "When present, it specifies that an input field is read-only."
+    },
     {
         name: "inputStyle",
         type: "any",
diff --git a/src/components/inputnumber/InputNumber.d.ts b/src/components/inputnumber/InputNumber.d.ts
index a5aa33d31a..4e6d3f0dae 100755
--- a/src/components/inputnumber/InputNumber.d.ts
+++ b/src/components/inputnumber/InputNumber.d.ts
@@ -133,6 +133,10 @@ export interface InputNumberProps {
      * Default value is true.
      */
     allowEmpty?: boolean | undefined;
+    /**
+     * When present, it specifies that an input field is read-only.
+     */
+    readonly?: boolean | undefined;
     /**
      * Inline style of the input field.
      */
diff --git a/src/components/inputnumber/InputNumber.vue b/src/components/inputnumber/InputNumber.vue
index 03774246ad..2732188b1c 100755
--- a/src/components/inputnumber/InputNumber.vue
+++ b/src/components/inputnumber/InputNumber.vue
@@ -1,6 +1,6 @@
 <template>
     <span :class="containerClass" :style="style">
-        <INInputText ref="input" :class="['p-inputnumber-input', inputClass]" :style="inputStyle" :value="formattedValue" v-bind="$attrs" :aria-valumin="min" :aria-valuemax="max"
+        <INInputText ref="input" :class="['p-inputnumber-input', inputClass]" :style="inputStyle" :value="formattedValue" v-bind="$attrs" :aria-valumin="min" :aria-valuemax="max" :readonly="readonly"
             @input="onUserInput" @keydown="onInputKeyDown" @keypress="onInputKeyPress" @paste="onPaste" @click="onInputClick" @focus="onInputFocus" @blur="onInputBlur"/>
         <span class="p-inputnumber-button-group" v-if="showButtons && buttonLayout === 'stacked'">
             <INButton :class="upButtonClass" :icon="incrementButtonIcon" v-on="upButtonListeners" :disabled="$attrs.disabled" />
@@ -108,6 +108,10 @@ export default {
             type: Boolean,
             default: true
         },
+        readonly: {
+            type: Boolean,
+            default: false
+        },
         style: null,
         class: null,
         inputStyle: null,
@@ -297,6 +301,10 @@ export default {
             return null;
         },
         repeat(event, interval, dir) {
+            if (this.readonly) {
+                return;
+            }
+
             let i = interval || 500;
 
             this.clearTimer();
@@ -379,6 +387,10 @@ export default {
             this.isSpecialChar = false;
         },
         onInputKeyDown(event) {
+            if (this.readonly) {
+                return;
+            }
+
             this.lastValue = event.target.value;
             if (event.shiftKey || event.altKey) {
                 this.isSpecialChar = true;
@@ -528,6 +540,10 @@ export default {
             }
         },
         onInputKeyPress(event) {
+            if (this.readonly) {
+                return;
+            }
+
             event.preventDefault();
             let code = event.which || event.keyCode;
             let char = String.fromCharCode(code);
@@ -734,7 +750,9 @@ export default {
             return index || 0;
         },
         onInputClick() {
-            this.initCursor();
+            if (!this.readonly) {
+                this.initCursor();
+            }
         },
         isNumeralChar(char) {
             if (char.length === 1 && (this._numeral.test(char) || this._decimal.test(char) || this._group.test(char) || this._minusSign.test(char))) {
diff --git a/src/views/inputnumber/InputNumberDoc.vue b/src/views/inputnumber/InputNumberDoc.vue
index 6800926bea..cb4b399e02 100755
--- a/src/views/inputnumber/InputNumberDoc.vue
+++ b/src/views/inputnumber/InputNumberDoc.vue
@@ -270,6 +270,12 @@ Vertical
                         <td>allowEmpty</td>
                         <td>boolean</td>
                         <td>true</td>
+                        <td>When present, it specifies that an input field is read-only.</td>
+                    </tr>
+                    <tr>
+                        <td>readonly</td>
+                        <td>boolean</td>
+                        <td>false</td>
                         <td>Determines whether the input field is empty.</td>
                     </tr>
                     <tr>