diff --git a/api-generator/components/chips.js b/api-generator/components/chips.js
index fcc0701b7b..b9fecc7769 100644
--- a/api-generator/components/chips.js
+++ b/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 = [
diff --git a/components/doc/chips/index.js b/components/doc/chips/index.js
index 6707a28d4b..c66db0d1b1 100644
--- a/components/doc/chips/index.js
+++ b/components/doc/chips/index.js
@@ -216,6 +216,8 @@ customChip(item) {
`}
+
KeyFilter
+ Chips has built-in key filtering support to block certain keys, refer to keyfilter page for more information.
Properties
@@ -331,6 +333,12 @@ customChip(item) {
null |
Template function to return the content of a chip. |
+
+ keyfilter |
+ string/regex |
+ null |
+ Format definition of the keys to block. |
+
@@ -374,6 +382,11 @@ customChip(item) {
event: Browser event |
Callback to invoke when the component loses focus. |
+
+ onKeyDown |
+ event: Browser event. |
+ Callback to invoke when the key pressed. |
+
diff --git a/components/lib/chips/Chips.d.ts b/components/lib/chips/Chips.d.ts
index ccc120f68f..5deb5ef2d4 100755
--- a/components/lib/chips/Chips.d.ts
+++ b/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): void;
onBlur?(event: React.FocusEvent): void;
+ onKeyDown?(event: React.KeyboardEvent): void;
children?: React.ReactNode;
}
diff --git a/components/lib/chips/Chips.js b/components/lib/chips/Chips.js
index e803a87da6..5ca55b3279 100644
--- a/components/lib/chips/Chips.js
+++ b/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
}