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 }