From cac1e8e6cfb2805a6540f9e80d564a0ff8be81c7 Mon Sep 17 00:00:00 2001
From: stew-ro <60453211+stew-ro@users.noreply.github.com>
Date: Fri, 25 Sep 2020 11:16:36 -0700
Subject: [PATCH] fix: disable move tag and support renaming when searching
 (#618)

* fix: disable move tag and support renaming when searching

* fix: remove console log
---
 .../components/common/tagInput/tagInput.tsx   |  6 ++-
 .../common/tagInput/tagInputToolbar.tsx       | 45 +++++++++++++------
 2 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/src/react/components/common/tagInput/tagInput.tsx b/src/react/components/common/tagInput/tagInput.tsx
index da1c30b33..45fe46a48 100644
--- a/src/react/components/common/tagInput/tagInput.tsx
+++ b/src/react/components/common/tagInput/tagInput.tsx
@@ -165,7 +165,7 @@ export class TagInput extends React.Component<ITagInputProps, ITagInputState> {
         };
 
         const { selectedTag, tagOperation } = this.state;
-        const selectedTagRef = selectedTag ? this.tagItemRefs.get(selectedTag.name).getTagNameRef() : null;
+        const selectedTagRef = selectedTag ? this.tagItemRefs.get(selectedTag.name)?.getTagNameRef() : null;
 
         return (
             <div className="tag-input">
@@ -178,6 +178,7 @@ export class TagInput extends React.Component<ITagInputProps, ITagInputState> {
                             searchTags: !this.state.searchTags,
                             searchQuery: "",
                         })}
+                        searchingTags={this.state.searchQuery.length > 0}
                         onRenameTag={this.onRenameTag}
                         onLockTag={this.onLockTag}
                         onDelete={this.onDeleteTag}
@@ -198,6 +199,7 @@ export class TagInput extends React.Component<ITagInputProps, ITagInputState> {
                                         onChange={(e) => this.setState({ searchQuery: e.target.value })}
                                         placeholder="Search tags"
                                         autoFocus={true}
+                                        onFocus={() => this.setState({selectedTag: null, tagOperation: TagOperationMode.Rename})}
                                     />
                                     <FontIcon iconName="Search" />
                                 </div>
@@ -648,6 +650,7 @@ export class TagInput extends React.Component<ITagInputProps, ITagInputState> {
                 },
                 text: strings.tags.toolbar.moveUp,
                 onClick: this.onMenuItemClick,
+                disabled: this.state.searchQuery.length > 0,
             },
             {
                 key: TagMenuItem.MoveDown,
@@ -656,6 +659,7 @@ export class TagInput extends React.Component<ITagInputProps, ITagInputState> {
                 },
                 text: strings.tags.toolbar.moveDown,
                 onClick: this.onMenuItemClick,
+                disabled: this.state.searchQuery.length > 0,
             },
             {
                 key: TagMenuItem.Delete,
diff --git a/src/react/components/common/tagInput/tagInputToolbar.tsx b/src/react/components/common/tagInput/tagInputToolbar.tsx
index 4b0e9f0c8..664c407ce 100644
--- a/src/react/components/common/tagInput/tagInputToolbar.tsx
+++ b/src/react/components/common/tagInput/tagInputToolbar.tsx
@@ -9,7 +9,8 @@ import { ITag } from "../../../../models/applicationState";
 enum Categories {
     General,
     Separator,
-    Modifier,
+    RenameModifier,
+    MoveModifier,
 }
 
 /** Properties for tag input toolbar */
@@ -28,6 +29,7 @@ export interface ITagInputToolbarProps {
     onDelete: (tag: ITag) => void;
     /** Function to call when one of the re-order buttons is clicked */
     onReorder: (tag: ITag, displacement: number) => void;
+    searchingTags: boolean;
 }
 
 interface ITagInputToolbarItemProps {
@@ -68,38 +70,44 @@ export default class TagInputToolbar extends React.Component<ITagInputToolbarPro
             {
                 displayName: strings.tags.toolbar.rename,
                 icon: "Rename",
-                category: Categories.Modifier,
+                category: Categories.RenameModifier,
                 handler: this.handleRename,
             },
             {
                 displayName: strings.tags.toolbar.moveUp,
                 icon: "Up",
-                category: Categories.Modifier,
+                category: Categories.MoveModifier,
                 handler: this.handleMoveUp,
             },
             {
                 displayName: strings.tags.toolbar.moveDown,
                 icon: "Down",
-                category: Categories.Modifier,
+                category: Categories.MoveModifier,
                 handler: this.handleMoveDown,
             },
             {
                 displayName: strings.tags.toolbar.delete,
                 icon: "Delete",
-                category: Categories.Modifier,
+                category: Categories.MoveModifier,
                 handler: this.handleDelete,
             },
         ];
     }
 
     private renderItems = () => {
-        const modifierDisabled = !this.props.selectedTag;
-        const modifierClassNames = ["tag-input-toolbar-iconbutton"];
-        if (modifierDisabled) {
-            modifierClassNames.push("tag-input-toolbar-iconbutton-disabled");
+        const moveModifierDisabled = !this.props.selectedTag || this.props.searchingTags;
+        const renameModifierDisabled = !this.props.selectedTag;
+        const moveModifierClassNames = ["tag-input-toolbar-iconbutton"];
+        const renameModifierClassNames = ["tag-input-toolbar-iconbutton"];
+        if (moveModifierDisabled) {
+            moveModifierClassNames.push("tag-input-toolbar-iconbutton-disabled");
+        }
+        if (renameModifierDisabled) {
+            renameModifierClassNames.push("tag-input-toolbar-iconbutton-disabled");
         }
 
-        const modifierClassName = modifierClassNames.join(" ");
+        const moveModifierClassName = moveModifierClassNames.join(" ");
+        const renameModifierClassName = renameModifierClassNames.join(" ");
 
         return(
             this.getToolbarItems().map((itemConfig, index) => {
@@ -116,14 +124,25 @@ export default class TagInputToolbar extends React.Component<ITagInputToolbarPro
                     );
                 } else if (itemConfig.category === Categories.Separator) {
                     return (<div className="tag-input-toolbar-separator" key={itemConfig.displayName}></div>);
-                } else if (itemConfig.category === Categories.Modifier) {
+                } else if (itemConfig.category === Categories.RenameModifier) {
+                    return (
+                        <IconButton
+                            key={itemConfig.displayName}
+                            disabled={renameModifierDisabled}
+                            title={itemConfig.displayName}
+                            ariaLabel={itemConfig.displayName}
+                            className={renameModifierClassName}
+                            iconProps={{iconName: itemConfig.icon}}
+                            onClick={(e) => this.onToolbarItemClick(e, itemConfig)} />
+                    );
+                } else if (itemConfig.category === Categories.MoveModifier) {
                     return (
                         <IconButton
                             key={itemConfig.displayName}
-                            disabled={modifierDisabled}
+                            disabled={moveModifierDisabled}
                             title={itemConfig.displayName}
                             ariaLabel={itemConfig.displayName}
-                            className={modifierClassName}
+                            className={moveModifierClassName}
                             iconProps={{iconName: itemConfig.icon}}
                             onClick={(e) => this.onToolbarItemClick(e, itemConfig)} />
                     );