From a2fc4b0d962140641b62408e944168019df7de06 Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Wed, 22 Nov 2023 08:07:31 -0500
Subject: [PATCH] Fix #5369: TabView showcase for closeable (#5371)

---
 components/doc/tabview/closabledoc.js | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/components/doc/tabview/closabledoc.js b/components/doc/tabview/closabledoc.js
index ab2257de25..6893c1724e 100644
--- a/components/doc/tabview/closabledoc.js
+++ b/components/doc/tabview/closabledoc.js
@@ -6,7 +6,7 @@ export function ClosableDoc(props) {
     const code = {
         basic: `
 <TabView>
-    <TabPanel header="Header I">
+    <TabPanel header="Header I" key="tab1">
         <p className="m-0">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
             Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -14,7 +14,7 @@ export function ClosableDoc(props) {
             Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </p>
     </TabPanel>
-    <TabPanel header="Header II" closable>
+    <TabPanel header="Header II" key="tab2" closable>
         <p className="m-0">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
             Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -22,7 +22,7 @@ export function ClosableDoc(props) {
             Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </p>
     </TabPanel>
-    <TabPanel header="Header III" closable>
+    <TabPanel header="Header III" key="tab3" closable>
         <p className="m-0">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
             Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -40,7 +40,7 @@ export default function ClosableDemo() {
     return (
         <div className="card">
             <TabView>
-                <TabPanel header="Header I">
+                <TabPanel header="Header I" key="tab1">
                     <p className="m-0">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -48,7 +48,7 @@ export default function ClosableDemo() {
                         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                     </p>
                 </TabPanel>
-                <TabPanel header="Header II" closable>
+                <TabPanel header="Header II" key="tab2" closable>
                     <p className="m-0">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -56,7 +56,7 @@ export default function ClosableDemo() {
                         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                     </p>
                 </TabPanel>
-                <TabPanel header="Header III" closable>
+                <TabPanel header="Header III" key="tab3" closable>
                     <p className="m-0">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -77,7 +77,7 @@ export default function ClosableDemo() {
     return (
         <div className="card">
             <TabView>
-                <TabPanel header="Header I">
+                <TabPanel header="Header I" key="tab1">
                     <p className="m-0">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -85,7 +85,7 @@ export default function ClosableDemo() {
                         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                     </p>
                 </TabPanel>
-                <TabPanel header="Header II" closable>
+                <TabPanel header="Header II" key="tab2" closable>
                     <p className="m-0">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -93,7 +93,7 @@ export default function ClosableDemo() {
                         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                     </p>
                 </TabPanel>
-                <TabPanel header="Header III" closable>
+                <TabPanel header="Header III" key="tab3" closable>
                     <p className="m-0">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -117,21 +117,21 @@ export default function ClosableDemo() {
             </DocSectionText>
             <div className="card">
                 <TabView>
-                    <TabPanel header="Header I">
+                    <TabPanel header="Header I" key="tab1">
                         <p className="m-0">
                             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                             consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
                             laborum.
                         </p>
                     </TabPanel>
-                    <TabPanel header="Header II" closable>
+                    <TabPanel header="Header II" key="tab2" closable>
                         <p className="m-0">
                             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                             consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
                             laborum.
                         </p>
                     </TabPanel>
-                    <TabPanel header="Header III" closable>
+                    <TabPanel header="Header III" key="tab3" closable>
                         <p className="m-0">
                             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                             consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est