Fix #2797: Chips add onKeyDown and KeyFilter

api-generator/components/chips.js

@@ -82,7 +82,13 @@ const ChipsProps = [
         type: 'function',
         default: 'null',
         description: 'Template function to return the content of a chip.'
-    }
+    },
+    {
+        name: 'keyfilter',
+        type: 'string/regex',
+        default: 'null',
+        description: 'Format definition of the keys to block.'
+      },
 ];
 
 const ChipsEvents = [
@@ -150,7 +156,18 @@ const ChipsEvents = [
                 description: 'Browser event'
             }
         ]
-    }
+    },
+    {
+        name: 'onKeyDown',
+        description: 'Callback to invoke when the key pressed.',
+        arguments: [
+            {
+                name: 'originalEvent',
+                type: 'object',
+                description: 'Browser event'
+            }
+        ]
+    },
 ];
 
 const ChipsStyles = [

components/doc/chips/index.js

@@ -216,6 +216,8 @@ customChip(item) {
 
 `}
 </CodeHighlight>
+                    <h5>KeyFilter</h5>
+                    <p>Chips has built-in key filtering support to block certain keys, refer to <Link href="/keyfilter">keyfilter</Link> page for more information.</p>
 
                     <h5>Properties</h5>
                     <div className="doc-tablewrapper">
@@ -331,6 +333,12 @@ customChip(item) {
                                     <td>null</td>
                                     <td>Template function to return the content of a chip.</td>
                                 </tr>
+                                <tr>
+                                    <td>keyfilter</td>
+                                    <td>string/regex</td>
+                                    <td>null</td>
+                                    <td>Format definition of the keys to block.</td>
+                                </tr>
                             </tbody>
                         </table>
                     </div>
@@ -374,6 +382,11 @@ customChip(item) {
                                     <td>event: Browser event</td>
                                     <td>Callback to invoke when the component loses focus.</td>
                                 </tr>
+                                <tr>
+                                    <td>onKeyDown</td>
+                                    <td>event: Browser event.</td>
+                                    <td>Callback to invoke when the key pressed.</td>
+                                </tr>
                             </tbody>
                         </table>
                     </div>

components/lib/chips/Chips.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import TooltipOptions from '../tooltip/tooltipoptions';
+import { KeyFilterType } from '../keyfilter';
 
 type ChipsRemovableType = boolean | ((options: ChipsRemovableOptions) => boolean);
 
@@ -48,12 +49,14 @@ export interface ChipsProps {
     ariaLabelledBy?: string;
     separator?: string;
     allowDuplicate?: boolean;
+    keyfilter?: KeyFilterType;
     itemTemplate?(item: any): React.ReactNode;
     onAdd?(e: ChipsAddParams): void;
     onRemove?(e: ChipsRemoveParams): void;
     onChange?(e: ChipsChangeParams): void;
     onFocus?(event: React.FocusEvent<HTMLInputElement>): void;
     onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
+    onKeyDown?(event: React.KeyboardEvent<HTMLInputElement>): void;
     children?: React.ReactNode;
 }
 

components/lib/chips/Chips.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { KeyFilter } from '../keyfilter/KeyFilter';
 import { Tooltip } from '../tooltip/Tooltip';
 import { classNames, ObjectUtils } from '../utils/Utils';
 
@@ -72,6 +73,13 @@ export const Chips = React.memo(React.forwardRef((props, ref) => {
         const inputValue = event.target.value;
         const values = props.value || [];
 
+        props.onKeyDown && props.onKeyDown(event);
+
+        // do not continue if the user defined keydown wants to prevent
+        if (event.defaultPrevented) {
+            return;
+        }
+
         switch (event.which) {
             //backspace
             case 8:
@@ -88,6 +96,9 @@ export const Chips = React.memo(React.forwardRef((props, ref) => {
                 break;
 
             default:
+                if (props.keyfilter) {
+                    KeyFilter.onKeyPress(event, props.keyfilter)
+                }
                 if (isMaxedOut()) {
                     event.preventDefault();
                 }
@@ -121,6 +132,10 @@ export const Chips = React.memo(React.forwardRef((props, ref) => {
         if (props.separator) {
             let pastedData = (event.clipboardData || window['clipboardData']).getData('Text');
 
+            if (props.keyfilter) {
+                KeyFilter.onPaste(event, props.keyfilter)
+            }
+
             if (pastedData) {
                 let values = props.value || [];
                 let pastedValues = pastedData.split(props.separator);
@@ -248,9 +263,11 @@ Chips.defaultProps = {
     separator: null,
     allowDuplicate: true,
     itemTemplate: null,
+    keyfilter: null,
     onAdd: null,
     onRemove: null,
     onChange: null,
     onFocus: null,
-    onBlur: null
+    onBlur: null,
+    onKeyDown: null
 }