From b4ff440e8705d56207cfa7e8fd8255af6dc5caaf Mon Sep 17 00:00:00 2001
From: Shaurya Sharma <shaurya064@gmail.com>
Date: Sun, 2 Mar 2025 13:09:56 +0530
Subject: [PATCH 1/2] Fixed popover values not saving when clicking on
 draggable items on inspector

---
 .../RightSideBar/Inspector/Components/Select.jsx          | 5 +++++
 .../RightSideBar/Inspector/Components/Table/Table.jsx     | 8 +++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx
index a57c879121..d0b058b7b0 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx
@@ -388,6 +388,11 @@ export function Select({ componentMeta, darkMode, ...restProps }) {
                             placement="left"
                             rootClose
                             overlay={_renderOverlay(item, index)}
+                            onToggle={(isOpen) => {
+                              if (!isOpen) {
+                                document.activeElement?.blur(); // Manually trigger blur when popover closes
+                              }
+                            }}
                           >
                             <div key={item.value}>
                               <ListGroup.Item
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/Table.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/Table.jsx
index 5a2175cfe1..02dc916a34 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/Table.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/Table.jsx
@@ -327,7 +327,12 @@ class TableComponent extends React.Component {
         placement="left"
         rootClose={this.state.actionPopOverRootClose}
         overlay={this.actionPopOver(action, index)}
-        onToggle={(showing) => this.setState({ showPopOver: showing })}
+        onToggle={(showing) => {
+          if (!showing) {
+            document.activeElement?.blur(); // Manually trigger blur when popover closes
+          }
+          this.setState({ showPopOver: showing });
+        }}
       >
         <div>
           <List>
@@ -647,6 +652,7 @@ class TableComponent extends React.Component {
                                     if (show) {
                                       this.handleToggleColumnPopover(index);
                                     } else {
+                                      document.activeElement?.blur(); // Manually trigger blur when popover closes
                                       this.handleToggleColumnPopover(null);
                                     }
                                   }}

From 5e826c2f6fe60575760d6fd02f91fd59a09f8f78 Mon Sep 17 00:00:00 2001
From: Shaurya Sharma <shaurya064@gmail.com>
Date: Mon, 3 Mar 2025 12:33:17 +0530
Subject: [PATCH 2/2] Dropdown breaking fix

---
 .../RightSideBar/Inspector/Components/Select.jsx          | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx
index d0b058b7b0..456b54cd02 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx
@@ -297,7 +297,7 @@ export function Select({ componentMeta, darkMode, ...restProps }) {
           </div>
           <div className="field mb-2" data-cy={`input-and-label-column-name`}>
             <CodeHinter
-              initialValue={isMultiSelect ? `{{${markedAsDefault.includes(item.value)}}}` : item?.default?.value}
+              initialValue={isMultiSelect ? `{{${markedAsDefault.includes(item?.value)}}}` : item?.default?.value}
               theme={darkMode ? 'monokai' : 'default'}
               mode="javascript"
               lineNumbers={false}
@@ -374,7 +374,7 @@ export function Select({ componentMeta, darkMode, ...restProps }) {
               <div className="w-100" {...droppableProps} ref={innerRef}>
                 {options?.map((item, index) => {
                   return (
-                    <Draggable key={item.value} draggableId={item.value} index={index}>
+                    <Draggable key={item?.value} draggableId={item?.value} index={index}>
                       {(provided, snapshot) => (
                         <div
                           key={index}
@@ -394,7 +394,7 @@ export function Select({ componentMeta, darkMode, ...restProps }) {
                               }
                             }}
                           >
-                            <div key={item.value}>
+                            <div key={item?.value}>
                               <ListGroup.Item
                                 style={{ marginBottom: '8px', backgroundColor: 'var(--slate3)' }}
                                 onMouseEnter={() => setHoveredOptionIndex(index)}
@@ -406,7 +406,7 @@ export function Select({ componentMeta, darkMode, ...restProps }) {
                                     <SortableList.DragHandle show />
                                   </div>
                                   <div className="col text-truncate cursor-pointer" style={{ padding: '0px' }}>
-                                    {getResolvedValue(item.label)}
+                                    {getResolvedValue(item?.label)}
                                   </div>
                                   <div className="col-auto">
                                     {index === hoveredOptionIndex && (