Fixed #897 - onFocus and onBlur for Chips

primefaces · May 30, 2019 · e75b24c · e75b24c
1 parent 3253a6e
commit e75b24c
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 5 deletions.
diff --git a/src/components/chips/Chips.d.ts b/src/components/chips/Chips.d.ts
@@ -16,6 +16,8 @@ interface ChipsProps {
     onAdd?(e: {originalEvent: Event, value: any}): void;
     onRemove?(e: {originalEvent: Event, value: any}): void;
     onChange?(e: {originalEvent: Event, value: any}): void;
+    onFocus?(event: Event): void;
+    onBlur?(event: Event): void;
 }
 
 export class Chips extends React.Component<ChipsProps,any> {}
diff --git a/src/components/chips/Chips.js b/src/components/chips/Chips.js
@@ -23,6 +23,8 @@ export class Chips extends Component {
         onAdd: null,
         onRemove: null,
         onChange: null,
+        onFocus: null,
+        onBlur: null
     }
 
     static propTypes = {
@@ -39,7 +41,9 @@ export class Chips extends Component {
         itemTemplate: PropTypes.func,
         onAdd: PropTypes.func,
         onRemove: PropTypes.func,
-        onChange: PropTypes.func
+        onChange: PropTypes.func,
+        onFocus: PropTypes.func,
+        onBlur: PropTypes.func
     }
 
     constructor(props) {
@@ -166,12 +170,19 @@ export class Chips extends Component {
         }
     }
 
-    onFocus() {
+    onFocus(event) {
         DomHandler.addClass(this.listElement, 'p-focus');
+        if (this.props.onFocus) {
+            this.props.onFocus(event);
+        }
     }
 
-    onBlur() {
+    onBlur(event) {
         DomHandler.removeClass(this.listElement, 'p-focus');
+
+        if (this.props.onFocus) {
+            this.props.onFocus(event);
+        }
     }
 
     isMaxedOut() {

diff --git a/src/showcase/chips/ChipsDemo.js b/src/showcase/chips/ChipsDemo.js
@@ -33,7 +33,7 @@ export class ChipsDemo extends Component {
                     </div>
                 </div>
 
-                <div className="content-section implementation">
+                <div className="content-section implementation p-fluid">
                     <h3>Basic</h3>
                     <Chips value={this.state.values1} onChange={(e) => this.setState({values1: e.value})}></Chips>
 
@@ -209,6 +209,16 @@ customChip(item) {
                                 value: Removed item value</td>
                             <td>Callback to invoke when a chip is removed.</td>
                         </tr>
+                        <tr>
+                            <td>onFocus</td>
+                            <td>event: Browser event</td>
+                            <td>Callback to invoke when the component gets focus.</td>
+                        </tr> 
+                        <tr>
+                            <td>onBlur</td>
+                            <td>event: Browser event</td>
+                            <td>Callback to invoke when the component loses focus.</td>
+                        </tr>  
                     </tbody>
                 </table>
             </div>
@@ -290,7 +300,7 @@ export class ChipsDemo extends Component {
                     </div>
                 </div>
 
-                <div className="content-section implementation">
+                <div className="content-section implementation p-fluid">
                     <h3>Basic</h3>
                     <Chips value={this.state.values1} onChange={(e) => this.setState({values1: e.value})}></Chips>