Fixed #2334 - Chips component: add 'readOnly' property

primefaces · Nov 4, 2021 · 33d03c3 · 33d03c3
1 parent 0cc35e5
commit 33d03c3
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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>