Create Tag Modal Issue: Clear the input value on press. (datahub-proj…

…ect#6212)
CybercentreCanada · Nov 18, 2022 · 3596af8 · 3596af8
1 parent 2a05b21
commit 3596af8
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/datahub-web-react/src/app/shared/constants.ts b/datahub-web-react/src/app/shared/constants.ts
@@ -0,0 +1 @@
+export const ENTER_KEY_CODE = 13;
diff --git a/datahub-web-react/src/app/shared/tags/AddTagsTermsModal.tsx b/datahub-web-react/src/app/shared/tags/AddTagsTermsModal.tsx
@@ -18,6 +18,7 @@ import { useEntityRegistry } from '../../useEntityRegistry';
 import { useGetRecommendations } from '../recommendation';
 import { FORBIDDEN_URN_CHARS_REGEX } from '../../entity/shared/utils';
 import { TagTermLabel } from './TagTermLabel';
+import { ENTER_KEY_CODE } from '../constants';
 
 export enum OperationType {
     ADD,
@@ -192,12 +193,17 @@ export default function EditTagTermsModal({
         querySelectorToExecuteClick: '#addTagButton',
     });
 
+    function handleOnClickBack() {
+        setInputValue('');
+        setShowCreateModal(false);
+    }
+
     if (showCreateModal) {
         return (
             <CreateTagModal
                 visible={visible}
                 onClose={onCloseModal}
-                onBack={() => setShowCreateModal(false)}
+                onBack={handleOnClickBack}
                 tagName={inputValue}
                 resources={resources}
             />
@@ -406,6 +412,12 @@ export default function EditTagTermsModal({
         setInputValue('');
     }
 
+    function handleKeyDown(event) {
+        if (event.keyCode === ENTER_KEY_CODE) {
+            (inputEl.current as any).blur();
+        }
+    }
+
     const isShowingGlossaryBrowser = !inputValue && type === EntityType.GlossaryTerm && isFocusedOnInput;
 
     return (
@@ -453,6 +465,7 @@ export default function EditTagTermsModal({
                     onClear={clearInput}
                     onFocus={() => setIsFocusedOnInput(true)}
                     onBlur={handleBlur}
+                    onInputKeyDown={handleKeyDown}
                     dropdownStyle={isShowingGlossaryBrowser ? { display: 'none' } : {}}
                 >
                     {tagSearchOptions}