From 958ebce1e1193e32fa52974094b8d95f1a4e9d82 Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Wed, 19 May 2021 17:32:14 +0300
Subject: [PATCH] Enable adding tags on blur (#34374)

---
 .../src/components/TagsInput/TagsInput.tsx          | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx b/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx
index dc1268b6316..b81c8955e9e 100644
--- a/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx
+++ b/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx
@@ -13,6 +13,7 @@ export interface Props {
   width?: number;
   className?: string;
   disabled?: boolean;
+  addOnBlur?: boolean;
 }
 
 export const TagsInput: FC<Props> = ({
@@ -22,6 +23,7 @@ export const TagsInput: FC<Props> = ({
   width,
   className,
   disabled,
+  addOnBlur,
 }) => {
   const [newTagName, setNewName] = useState('');
   const styles = useStyles(getStyles);
@@ -38,14 +40,20 @@ export const TagsInput: FC<Props> = ({
     onChange(tags?.filter((x) => x !== tagToRemove));
   };
 
-  const onAdd = (event: React.MouseEvent) => {
-    event.preventDefault();
+  const onAdd = (event?: React.MouseEvent) => {
+    event?.preventDefault();
     if (!tags.includes(newTagName)) {
       onChange(tags.concat(newTagName));
     }
     setNewName('');
   };
 
+  const onBlur = () => {
+    if (addOnBlur && newTagName) {
+      onAdd();
+    }
+  };
+
   const onKeyboardAdd = (event: KeyboardEvent) => {
     event.preventDefault();
     if (event.key === 'Enter' && newTagName !== '') {
@@ -68,6 +76,7 @@ export const TagsInput: FC<Props> = ({
           onChange={onNameChange}
           value={newTagName}
           onKeyUp={onKeyboardAdd}
+          onBlur={onBlur}
           suffix={
             newTagName.length > 0 && (
               <Button fill="text" className={styles.addButtonStyle} onClick={onAdd} size="md">