From 0174be46406d6de7214226c07e275eba693481ee Mon Sep 17 00:00:00 2001
From: KonstantinEpam23 <101649391+KonstantinEpam23@users.noreply.github.com>
Date: Fri, 16 Dec 2022 20:22:42 +0300
Subject: [PATCH] Backmerge: #1936 Adding functional group to atom generate a
 JavaScript console error (#1949)

Co-authored-by: ansivgit <ansiv@yandex.ru>
---
 .../script/ui/dialog/template/TemplateDialog.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/ketcher-react/src/script/ui/dialog/template/TemplateDialog.tsx b/packages/ketcher-react/src/script/ui/dialog/template/TemplateDialog.tsx
index 388404685b..e6934530a4 100644
--- a/packages/ketcher-react/src/script/ui/dialog/template/TemplateDialog.tsx
+++ b/packages/ketcher-react/src/script/ui/dialog/template/TemplateDialog.tsx
@@ -72,7 +72,7 @@ interface TemplateLibProps {
   filter: string
   group: string
   lib: Array<Template>
-  selected: Template
+  selected: Template | null
   mode: string
   initialTab: number
   saltsAndSolvents: Template[]
@@ -330,6 +330,14 @@ const TemplateDialog: FC<Props> = (props) => {
   )
 }
 
+const selectTemplate = (template, props, dispatch) => {
+  dispatch(selectTmpl(null))
+  if (!template) return
+  dispatch(selectTmpl(template))
+  dispatch(onAction({ tool: 'template', opts: template }))
+  props.onOk(template)
+}
+
 export default connect(
   (store) => ({
     ...omit(['attach'], (store as any).templates),
@@ -339,11 +347,7 @@ export default connect(
   }),
   (dispatch: Dispatch<any>, props: Props) => ({
     onFilter: (filter) => dispatch(changeFilter(filter)),
-    onSelect: (tmpl) => {
-      dispatch(selectTmpl(tmpl))
-      dispatch(onAction({ tool: 'template', opts: tmpl }))
-      props.onOk(tmpl)
-    },
+    onSelect: (tmpl) => selectTemplate(tmpl, props, dispatch),
     onChangeGroup: (group) => dispatch(changeGroup(group)),
     onAttach: (tmpl) => dispatch(editTmpl(tmpl)),
     onDelete: (tmpl) => dispatch(deleteTmpl(tmpl))