From 3f4f9b03dc0d9be119eab77de1893a15875b086d Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Tue, 7 Nov 2023 18:59:00 +0300
Subject: [PATCH] Still have problem with canvas preventing key events from
 firing

---
 .../src/pages/RSFormPage/EditorConstituenta.tsx  |  2 +-
 .../src/pages/RSFormPage/EditorItems.tsx         |  2 +-
 .../src/pages/RSFormPage/EditorRSForm.tsx        |  2 +-
 .../src/pages/RSFormPage/EditorTermGraph.tsx     | 16 ++++++++--------
 .../frontend/src/pages/RSFormPage/RSTabs.tsx     |  7 +++----
 rsconcept/frontend/src/utils/constants.ts        |  1 +
 6 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx
index 3804ef52..60cd8363 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx
@@ -161,7 +161,7 @@ function EditorConstituenta({
   }
 
   return (
-  <div className='flex max-w-[1500px] gap-2' tabIndex={0} onKeyDown={handleInput}>
+  <div className='flex max-w-[1500px] gap-2' tabIndex={-1} onKeyDown={handleInput}>
     <form onSubmit={handleSubmit} className='min-w-[50rem] max-w-[50rem] px-4 py-1'>
       <div className='relative w-full'>
       <div className='absolute top-0 right-0 flex items-start justify-between w-full'>
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorItems.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorItems.tsx
index ba34ded8..e674d0fd 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorItems.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorItems.tsx
@@ -293,7 +293,7 @@ function EditorItems({ onOpenEdit, onCreateCst, onDeleteCst, onTemplates }: Edit
   <div
     className='w-full outline-none'
     style={{minHeight: mainHeight}}
-    tabIndex={0}
+    tabIndex={-1}
     onKeyDown={handleTableKey}
   >
     <div className='sticky top-0 flex justify-start w-full gap-1 px-2 py-1 border-b items-center h-[2.2rem] select-none clr-app'>
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm.tsx
index 1e02a5c2..96bcb358 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm.tsx
@@ -94,7 +94,7 @@ function EditorRSForm({ onDestroy, onClaim, onShare, isModified, setIsModified,
   }
 
   return (
-  <div tabIndex={0} onKeyDown={handleInput}>
+  <div tabIndex={-1} onKeyDown={handleInput}>
     <div className='relative flex items-start justify-center w-full'>
     <div className='absolute flex mt-1'>
       <MiniButton
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx
index 9c3c4921..4851527d 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx
@@ -245,7 +245,6 @@ function EditorTermGraph({ onOpenEdit, onCreateCst, onDeleteCst }: EditorTermGra
     if (event.key === 'Delete' && allSelected.length > 0) {
       event.preventDefault();
       handleDeleteCst();
-      return;
     }
   }
 
@@ -446,10 +445,11 @@ function EditorTermGraph({ onOpenEdit, onCreateCst, onDeleteCst }: EditorTermGra
         {dismissed.map(cstID => {
           const cst = schema!.items.find(cst => cst.id === cstID)!;
           const adjustedColoring = coloringScheme === 'none' ? 'status': coloringScheme;
-          return (<>
+          const id = `${prefixes.cst_hidden_list}${cst.alias}`
+          return (<div key={`wrap-${id}`}>
             <div
-              key={`${cst.alias}`}
-              id={`${prefixes.cst_list}${cst.alias}`}
+              key={id}
+              id={id}
               className='w-fit min-w-[3rem] rounded-md text-center cursor-pointer select-none'
               style={{ 
                 backgroundColor: getCstNodeColor(cst, adjustedColoring, colors),
@@ -460,18 +460,18 @@ function EditorTermGraph({ onOpenEdit, onCreateCst, onDeleteCst }: EditorTermGra
             >
               {cst.alias}
             </div>
-            <ConstituentaTooltip 
+            <ConstituentaTooltip
               data={cst}
-              anchor={`#${prefixes.cst_list}${cst.alias}`}
+              anchor={`#${id}`}
             />
-          </>);
+          </div>);
         })}
         </div>
       </div>}
     </div>
     </div>
 
-    <div className='w-full h-full overflow-auto outline-none' tabIndex={0} onKeyDown={handleKeyDown}>
+    <div className='w-full h-full overflow-auto outline-none' tabIndex={-1} onKeyDown={handleKeyDown}>
     <div 
       className='relative'
       style={{width: canvasWidth, height: canvasHeight}}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx b/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
index ccfae0d1..9b56bf7f 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
@@ -384,7 +384,6 @@ function RSTabs() {
       selectedIndex={activeTab}
       onSelect={onSelectTab}
       defaultFocus
-      forceRenderTabPanel
       selectedTabClassName='clr-selected'
       className='flex flex-col items-center w-full'
     >
@@ -420,7 +419,7 @@ function RSTabs() {
       </TabList>
 
       <div className='overflow-y-auto' style={{ maxHeight: panelHeight}}>
-        <TabPanel style={{ display: activeTab === RSTabID.CARD ? '': 'none' }}>
+        <TabPanel forceRender style={{ display: activeTab === RSTabID.CARD ? '': 'none' }}>
           <EditorRSForm
             isModified={isModified}
             setIsModified={setIsModified}
@@ -431,7 +430,7 @@ function RSTabs() {
           />
         </TabPanel>
 
-        <TabPanel style={{ display: activeTab === RSTabID.CST_LIST ? '': 'none' }}>
+        <TabPanel forceRender style={{ display: activeTab === RSTabID.CST_LIST ? '': 'none' }}>
           <EditorItems
             onOpenEdit={onOpenCst}
             onCreateCst={promptCreateCst}
@@ -440,7 +439,7 @@ function RSTabs() {
           />
         </TabPanel>
 
-        <TabPanel style={{ display: activeTab === RSTabID.CST_EDIT ? '': 'none' }}>
+        <TabPanel forceRender style={{ display: activeTab === RSTabID.CST_EDIT ? '': 'none' }}>
           <EditorConstituenta
             isModified={isModified}
             setIsModified={setIsModified}
diff --git a/rsconcept/frontend/src/utils/constants.ts b/rsconcept/frontend/src/utils/constants.ts
index a72b8aa0..2c1cc72b 100644
--- a/rsconcept/frontend/src/utils/constants.ts
+++ b/rsconcept/frontend/src/utils/constants.ts
@@ -34,6 +34,7 @@ export const globalIDs = {
 
 export const prefixes = {
   cst_list: 'cst-list-',
+  cst_hidden_list: 'cst-hidden-list-',
   cst_modal_list: 'cst-modal-list-',
   cst_template_ist: 'cst-template-list-',
   cst_wordform_list: 'cst-wordform-list-',