From ce65d448c92fbfb9e28e7e3c1e6b8b34a6795b94 Mon Sep 17 00:00:00 2001
From: Eric NGUYEN <enguyen@techform.fr>
Date: Fri, 16 Sep 2022 14:53:13 +0200
Subject: [PATCH] Fix Category missing key + Fix button cannot be inside button

---
 src/Components/Category/Category.tsx | 12 ++++++------
 src/Components/Sidebar/Sidebar.tsx   | 11 +++++++----
 test-server/http.js                  |  1 +
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/Components/Category/Category.tsx b/src/Components/Category/Category.tsx
index 2de579d..2b30935 100644
--- a/src/Components/Category/Category.tsx
+++ b/src/Components/Category/Category.tsx
@@ -12,8 +12,8 @@ export function Category(props: ICategoryProps): JSX.Element {
 
   if (isOpen) {
     return (
-      <button type="button"
-        className='overflow-hidden h-full transition-all'
+      <div
+        className='overflow-hidden h-full transition-all text-center cursor-pointer'
         key={props.category}
         id={props.category}
         title={props.category}
@@ -32,13 +32,13 @@ export function Category(props: ICategoryProps): JSX.Element {
         <div className='transition-all grid gap-2 p-2 bg-slate-400/80 overflow-auto rounded-b-lg visible'>
           { props.children }
         </div>
-      </button>
+      </div>
     );
   }
 
   return (
-    <button type="button"
-      className='overflow-visible h-16 group transition-all'
+    <div
+      className='overflow-visible h-16 group transition-all text-center cursor-pointer'
       key={props.category}
       id={props.category}
       title={props.category}
@@ -55,6 +55,6 @@ export function Category(props: ICategoryProps): JSX.Element {
       <div className='transition-all overflow-hidden rounded-b-lg hidden'>
         { props.children }
       </div>
-    </button>
+    </div>
   );
 }
diff --git a/src/Components/Sidebar/Sidebar.tsx b/src/Components/Sidebar/Sidebar.tsx
index da22551..3c36de5 100644
--- a/src/Components/Sidebar/Sidebar.tsx
+++ b/src/Components/Sidebar/Sidebar.tsx
@@ -1,4 +1,3 @@
-import { ChevronRightIcon } from '@heroicons/react/outline';
 import * as React from 'react';
 import { IAvailableContainer } from '../../Interfaces/IAvailableContainer';
 import { TruncateString } from '../../utils/stringtools';
@@ -23,9 +22,10 @@ export function Sidebar(props: ISidebarProps): JSX.Element {
       return;
     }
 
-    const componentButton = (<button type="button"
-      className='w-full justify-center h-16 transition-all sidebar-component'
+    const componentButton = (<button
       key={componentOption.Type}
+      type="button"
+      className='w-full justify-center h-16 transition-all sidebar-component'
       id={componentOption.Type}
       title={componentOption.Type}
       onClick={() => props.buttonOnClick(componentOption.Type)}
@@ -56,7 +56,10 @@ export function Sidebar(props: ISidebarProps): JSX.Element {
   // build the categories
   categories.forEach((options, category) => {
     rootElements.unshift(
-      <Category category={category}>
+      <Category
+        key={category}
+        category={category}
+      >
         { options }
       </Category>);
   });
diff --git a/test-server/http.js b/test-server/http.js
index 1ddf246..0feb864 100644
--- a/test-server/http.js
+++ b/test-server/http.js
@@ -99,6 +99,7 @@ const GetSVGLayoutConfiguration = () => {
       },
       {
         Type: 'Remplissage',
+        Category: "Category2",
         CustomSVG: `
           <rect width="{width}" height="{height}" style="{style}"></rect>
           <rect  width="{width}" height="{height}" stroke="black" fill-opacity="0"></rect>