From 33d03c339db8fba5c37e14beef416935d7049bf9 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Thu, 4 Nov 2021 14:52:34 +0300
Subject: [PATCH] Fixed #2334 - Chips component: add 'readOnly' property

---
 src/components/chips/Chips.d.ts | 1 +
 src/components/chips/Chips.js   | 9 ++++++---
 src/showcase/chips/ChipsDoc.js  | 6 ++++++
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/chips/Chips.d.ts b/src/components/chips/Chips.d.ts
index ff2d86a8dd..2a625d5f25 100755
--- a/src/components/chips/Chips.d.ts
+++ b/src/components/chips/Chips.d.ts
@@ -38,6 +38,7 @@ export interface ChipsProps {
     value?: any[];
     max?: number;
     disabled?: boolean;
+    readOnly?: boolean;
     removable?: ChipsRemovableType;
     style?: object;
     className?: string;
diff --git a/src/components/chips/Chips.js b/src/components/chips/Chips.js
index f4a5a55281..4c4e386cca 100644
--- a/src/components/chips/Chips.js
+++ b/src/components/chips/Chips.js
@@ -13,6 +13,7 @@ export class Chips extends Component {
         value: null,
         max: null,
         disabled: null,
+        readOnly: false,
         removable: true,
         style: null,
         className: null,
@@ -37,6 +38,7 @@ export class Chips extends Component {
         value: PropTypes.array,
         max: PropTypes.number,
         disabled: PropTypes.bool,
+        readOnly: PropTypes.bool,
         removable: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
         style: PropTypes.object,
         className: PropTypes.string,
@@ -70,7 +72,7 @@ export class Chips extends Component {
     }
 
     removeItem(event, index) {
-        if (this.props.disabled) {
+        if (this.props.disabled && this.props.readOnly) {
             return;
         }
 
@@ -280,7 +282,7 @@ export class Chips extends Component {
     }
 
     renderRemoveIcon(value, index) {
-        if (!this.props.disabled && this.isRemovable(value, index)) {
+        if (!this.props.disabled && !this.props.readOnly && this.isRemovable(value, index)) {
             return (
                 <span className="p-chips-token-icon pi pi-times-circle" onClick={(event) => this.removeItem(event, index)}></span>
             )
@@ -305,7 +307,8 @@ export class Chips extends Component {
         return (
             <li className="p-chips-input-token">
                 <input ref={this.inputRef} placeholder={this.props.placeholder} type="text" name={this.props.name} disabled={this.props.disabled||this.isMaxedOut()}
-                            onKeyDown={this.onKeyDown} onPaste={this.onPaste} onFocus={this.onFocus} onBlur={this.onBlur} aria-labelledby={this.props.ariaLabelledBy}/>
+                            onKeyDown={this.onKeyDown} onPaste={this.onPaste} onFocus={this.onFocus} onBlur={this.onBlur} aria-labelledby={this.props.ariaLabelledBy}
+                            readOnly={this.props.readOnly} />
             </li>
         );
     }
diff --git a/src/showcase/chips/ChipsDoc.js b/src/showcase/chips/ChipsDoc.js
index ebf00899c9..0a9333b753 100644
--- a/src/showcase/chips/ChipsDoc.js
+++ b/src/showcase/chips/ChipsDoc.js
@@ -267,6 +267,12 @@ customChip(item) {
                                         <td>false</td>
                                         <td>When present, it specifies that the element should be disabled.</td>
                                     </tr>
+                                    <tr>
+                                        <td>readOnly</td>
+                                        <td>boolean</td>
+                                        <td>false</td>
+                                        <td>When present, it specifies that the element should be read-only.</td>
+                                    </tr>
                                     <tr>
                                         <td>removable</td>
                                         <td>boolean</td>