From 902c2a9d77a6defa1b9dd93956804212cfeab3db Mon Sep 17 00:00:00 2001
From: devanshu052000 <devanshu.rastogi05@gmail.com>
Date: Mon, 24 Mar 2025 23:03:18 +0530
Subject: [PATCH] Fix onClick behaviour in editor and preview mode.

---
 .../Components/DropdownV2/DropdownV2.jsx      | 19 +++++++++++++--
 .../MultiselectV2/MultiselectV2.jsx           | 23 +++++++++++--------
 2 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx b/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx
index b2445435c0..feb3087920 100644
--- a/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx
+++ b/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx
@@ -15,6 +15,7 @@ import Label from '@/_ui/Label';
 import cx from 'classnames';
 import { getInputBackgroundColor, getInputBorderColor, getInputFocusedColor } from './utils';
 import { isMobileDevice } from '@/_helpers/appUtils';
+import useStore from '@/AppBuilder/_stores/store';
 
 const { DropdownIndicator, ClearIndicator } = components;
 const INDICATOR_CONTAINER_WIDTH = 60;
@@ -39,7 +40,7 @@ export const CustomDropdownIndicator = (props) => {
 export const CustomClearIndicator = (props) => {
   return (
     <ClearIndicator {...props}>
-      <ClearIndicatorIcon width={'18'} fill={'var(--borders-strong)'} className="cursor-pointer" />
+      <ClearIndicatorIcon width={'18'} fill={'var(--borders-strong)'} className="cursor-pointer clear-indicator" />
     </ClearIndicator>
   );
 };
@@ -96,11 +97,14 @@ export const DropdownV2 = ({
   const { isValid, validationError } = validationStatus;
   const ref = React.useRef(null);
   const dropdownRef = React.useRef(null);
+  const selectRef = React.useRef(null);
   const [visibility, setVisibility] = useState(properties.visibility);
   const [isDropdownLoading, setIsDropdownLoading] = useState(dropdownLoadingState);
   const [isDropdownDisabled, setIsDropdownDisabled] = useState(disabledState);
   const [searchInputValue, setSearchInputValue] = useState('');
   const [userInteracted, setUserInteracted] = useState(false);
+  const currentMode = useStore((state) => state.currentMode);
+  const isEditor = currentMode === 'edit';
 
   const _height = padding === 'default' ? `${height}px` : `${height + 4}px`;
   const labelRef = useRef();
@@ -167,6 +171,12 @@ export const DropdownV2 = ({
     setExposedVariable('isValid', validationStatus?.isValid);
   };
 
+  const handleClickInEditor = (e) => {
+    if (e.target.className.includes('clear-indicator') || isMenuOpen) return;
+    e.stopPropagation();
+    selectRef.current?.onControlMouseDown(e);
+  };
+
   useEffect(() => {
     setInputValue(findDefaultItem(advanced ? schema : options));
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -431,8 +441,13 @@ export const DropdownV2 = ({
           _width={_width}
           top={'1px'}
         />
-        <div className="w-100 px-0 h-100 dropdownV2-widget" ref={ref}>
+        <div
+          className="w-100 px-0 h-100 dropdownV2-widget"
+          ref={ref}
+          onMouseDownCapture={isEditor && handleClickInEditor}
+        >
           <Select
+            ref={selectRef}
             menuIsOpen={isMenuOpen}
             isDisabled={isDropdownDisabled}
             value={selectOptions.filter((option) => option.value === currentValue)[0] ?? null}
diff --git a/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx b/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx
index 93c8be1baf..4665430d00 100644
--- a/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx
+++ b/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx
@@ -12,6 +12,7 @@ import Label from '@/_ui/Label';
 const tinycolor = require('tinycolor2');
 import { CustomDropdownIndicator, CustomClearIndicator } from '../DropdownV2/DropdownV2';
 import { getInputBackgroundColor, getInputBorderColor, getInputFocusedColor } from '../DropdownV2/utils';
+import useStore from '@/AppBuilder/_stores/store';
 
 export const MultiselectV2 = ({
   id,
@@ -62,6 +63,7 @@ export const MultiselectV2 = ({
   const isMandatory = validation?.mandatory ?? false;
   const multiselectRef = React.useRef(null);
   const labelRef = React.useRef(null);
+  const selectRef = React.useRef(null);
   const [validationStatus, setValidationStatus] = useState(
     validate(selected?.length ? selected?.map((option) => option.value) : null)
   );
@@ -74,6 +76,8 @@ export const MultiselectV2 = ({
   const [searchInputValue, setSearchInputValue] = useState('');
   const _height = padding === 'default' ? `${height}px` : `${height + 4}px`;
   const [userInteracted, setUserInteracted] = useState(false);
+  const currentMode = useStore((state) => state.currentMode);
+  const isEditor = currentMode === 'edit';
 
   const [isMultiselectOpen, setIsMultiselectOpen] = useState(false);
   useEffect(() => {
@@ -281,6 +285,12 @@ export const MultiselectV2 = ({
     }
   };
 
+  const handleClickInEditor = (e) => {
+    if (e.target.className.includes('clear-indicator') || isMultiselectOpen) return;
+    e.stopPropagation();
+    selectRef.current?.onControlMouseDown(e);
+  };
+
   const setInputValue = (values) => {
     setSelected(values);
     setExposedVariables({
@@ -457,16 +467,9 @@ export const MultiselectV2 = ({
           _width={_width}
           top={'1px'}
         />
-        <div
-          className="w-100 px-0 h-100"
-          onClick={() => {
-            if (!isMultiSelectDisabled) {
-              fireEvent('onFocus');
-              setIsMultiselectOpen(!isMultiselectOpen);
-            }
-          }}
-        >
+        <div className="w-100 px-0 h-100" onMouseDownCapture={isEditor && handleClickInEditor}>
           <Select
+            ref={selectRef}
             menuId={id}
             isDisabled={isMultiSelectDisabled}
             value={selected}
@@ -495,8 +498,8 @@ export const MultiselectV2 = ({
             controlShouldRenderValue={false}
             isSearchable={false}
             onMenuOpen={() => {
-              fireEvent('onFocus');
               setIsMultiselectOpen(true);
+              fireEvent('onFocus');
             }}
             onMenuClose={() => {
               setIsMultiselectOpen(false);