diff --git a/src/index.tsx b/src/index.tsx index 0bf6bce..c99d9c5 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -13,6 +13,8 @@ export interface ReactTagInputProps { editable?: boolean; readOnly?: boolean; removeOnBackspace?: boolean; + addOnBlur?: boolean + delimiters?: [number] } interface State { @@ -33,10 +35,10 @@ export default class ReactTagInput extends React.Component) => { const { input } = this.state; - const { validator, removeOnBackspace } = this.props; + const { validator, removeOnBackspace, delimiters } = this.props; - // On enter - if (e.keyCode === 13) { + // Check if default Enter or one of the delimiter keys was hit + if (e.keyCode === 13 || delimiters?.includes(e.keyCode)) { // Prevent form submission if tag input is nested in
e.preventDefault(); @@ -69,6 +71,29 @@ export default class ReactTagInput extends React.Component { + + const { input } = this.state + const { validator, addOnBlur } = this.props + + if (addOnBlur) { + + // If input is blank, do nothing + if (input === "") { return; } + + // Check if input is valid + const valid = validator !== undefined ? validator(input) : true + if (!valid) { + return; + } + + // Add input to tag list + this.addTag(input) + + } + + } + addTag = (value: string) => { const tags = [ ...this.props.tags ]; if (!tags.includes(value)) { @@ -131,6 +156,7 @@ export default class ReactTagInput extends React.Component }