Add option for accepting input via different keys and onBlur

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<ReactTagInputProps, S
   onInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
 
     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 <form>
       e.preventDefault();
@@ -69,6 +71,29 @@ export default class ReactTagInput extends React.Component<ReactTagInputProps, S
 
   }
 
+  onBlur = () => {
+
+    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<ReactTagInputProps, S
             placeholder={placeholder || "Type and press enter"}
             onChange={this.onInputChange}
             onKeyDown={this.onInputKeyDown}
+            onBlur={this.onBlur}
           />
         }
       </div>