diff --git a/datahub-web-react/src/app/shared/constants.ts b/datahub-web-react/src/app/shared/constants.ts new file mode 100644 index 0000000000000..dc04372b43607 --- /dev/null +++ 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 index f88a27fd0c079..687ac8f42365a 100644 --- 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}