From d68565b43c56976aae9288fed466e170095c2f27 Mon Sep 17 00:00:00 2001
From: devanshu052000 <devanshu.rastogi05@gmail.com>
Date: Mon, 17 Mar 2025 17:15:36 +0530
Subject: [PATCH 1/3] Added support for arrow key navigation in Dropdown and
 Multiselect component.

---
 .../Components/DropdownV2/DropdownV2.jsx      | 28 ++++++++++++++++---
 .../MultiselectV2/CustomValueContainer.jsx    |  9 +++++-
 .../MultiselectV2/MultiselectV2.jsx           | 20 ++++++++++++-
 3 files changed, 51 insertions(+), 6 deletions(-)

diff --git a/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx b/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx
index a01ed895e0..b2445435c0 100644
--- a/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx
+++ b/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx
@@ -88,6 +88,7 @@ export const DropdownV2 = ({
     padding,
   } = styles;
   const isInitialRender = useRef(true);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [currentValue, setCurrentValue] = useState(() => findDefaultItem(schema));
   const isMandatory = validation?.mandatory ?? false;
   const options = properties?.options;
@@ -353,15 +354,16 @@ export const DropdownV2 = ({
       ...provided,
       padding: '0px',
     }),
-    option: (provided) => ({
+    option: (provided, _state) => ({
       ...provided,
-      backgroundColor: 'var(--surfaces-surface-01)',
+      backgroundColor: _state.isFocused ? 'var(--interactive-overlays-fill-hover)' : 'var(--surfaces-surface-01)',
       color:
         selectedTextColor !== '#1B1F24'
           ? selectedTextColor
           : isDropdownDisabled || isDropdownLoading
           ? 'var(--text-disabled)'
           : 'var(--text-primary)',
+      borderRadius: _state.isFocused && '8px',
       padding: '8px 6px 8px 38px',
       '&:hover': {
         backgroundColor: 'var(--interactive-overlays-fill-hover)',
@@ -431,6 +433,7 @@ export const DropdownV2 = ({
         />
         <div className="w-100 px-0 h-100 dropdownV2-widget" ref={ref}>
           <Select
+            menuIsOpen={isMenuOpen}
             isDisabled={isDropdownDisabled}
             value={selectOptions.filter((option) => option.value === currentValue)[0] ?? null}
             onChange={(selectedOption, actionProps) => {
@@ -460,6 +463,7 @@ export const DropdownV2 = ({
               ClearIndicator: CustomClearIndicator,
             }}
             isClearable
+            tabSelectsValue={false}
             icon={icon}
             doShowIcon={iconVisibility}
             iconColor={iconColor}
@@ -467,8 +471,24 @@ export const DropdownV2 = ({
             darkMode={darkMode}
             optionsLoadingState={optionsLoadingState && advanced}
             menuPlacement="auto"
-            onMenuOpen={() => fireEvent('onFocus')}
-            onMenuClose={() => fireEvent('onBlur')}
+            onMenuOpen={() => {
+              setIsMenuOpen(true);
+              fireEvent('onFocus');
+            }}
+            onMenuClose={() => {
+              setIsMenuOpen(false);
+              fireEvent('onBlur');
+            }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && !isMenuOpen) {
+                setIsMenuOpen(true);
+                e.preventDefault();
+              }
+              if (e.key === 'Escape' && isMenuOpen) {
+                setIsMenuOpen(false);
+                e.preventDefault();
+              }
+            }}
           />
         </div>
       </div>
diff --git a/frontend/src/Editor/Components/MultiselectV2/CustomValueContainer.jsx b/frontend/src/Editor/Components/MultiselectV2/CustomValueContainer.jsx
index 2e6078d5c6..2901abc106 100644
--- a/frontend/src/Editor/Components/MultiselectV2/CustomValueContainer.jsx
+++ b/frontend/src/Editor/Components/MultiselectV2/CustomValueContainer.jsx
@@ -4,7 +4,7 @@ import * as Icons from '@tabler/icons-react';
 const { ValueContainer, Placeholder } = components;
 import './multiselectV2.scss';
 
-const CustomValueContainer = ({ ...props }) => {
+const CustomValueContainer = ({ children, ...props }) => {
   const selectProps = props.selectProps;
   const values = Array.isArray(selectProps?.value) && selectProps?.value?.map((option) => option.label);
   const isAllOptionsSelected = selectProps?.value.length === selectProps.options.length;
@@ -39,6 +39,13 @@ const CustomValueContainer = ({ ...props }) => {
               {isAllOptionsSelected ? 'All items are selected.' : values.join(', ')}
             </span>
           )}
+          {/* Rendering children except Placeholder component to preserve the default behavior of react-select like focus
+          handling */}
+          {React.Children.map(children, (child) => {
+            if (child.type !== Placeholder) {
+              return child;
+            }
+          })}
         </span>
       </div>
     </ValueContainer>
diff --git a/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx b/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx
index 6ef45e84d9..93c8be1baf 100644
--- a/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx
+++ b/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx
@@ -386,7 +386,7 @@ export const MultiselectV2 = ({
     }),
     option: (provided, _state) => ({
       ...provided,
-      backgroundColor: 'var(--surfaces-surface-01)',
+      backgroundColor: _state.isFocused ? 'var(--interactive-overlays-fill-hover)' : 'var(--surfaces-surface-01)',
       color: _state.isDisabled
         ? 'var(_--text-disbled)'
         : selectedTextColor !== '#1B1F24'
@@ -394,6 +394,7 @@ export const MultiselectV2 = ({
         : isMultiSelectDisabled || isMultiSelectLoading
         ? 'var(--text-disabled)'
         : 'var(--text-primary)',
+      borderRadius: _state.isFocused && '8px',
       padding: '8px 6px 8px 12px',
       '&:hover': {
         backgroundColor: 'var(--interactive-overlays-fill-hover)',
@@ -490,10 +491,27 @@ export const MultiselectV2 = ({
             isMulti
             hideSelectedOptions={false}
             closeMenuOnSelect={false}
+            tabSelectsValue={false}
+            controlShouldRenderValue={false}
+            isSearchable={false}
             onMenuOpen={() => {
               fireEvent('onFocus');
               setIsMultiselectOpen(true);
             }}
+            onMenuClose={() => {
+              setIsMultiselectOpen(false);
+              fireEvent('onBlur');
+            }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && !isMultiselectOpen) {
+                setIsMultiselectOpen(true);
+                e.preventDefault();
+              }
+              if (e.key === 'Escape' && isMultiselectOpen) {
+                setIsMultiselectOpen(false);
+                e.preventDefault();
+              }
+            }}
             // select props
             icon={icon}
             doShowIcon={iconVisibility}

From 1e29ec1660817a027d1847721f9889db4f475cce Mon Sep 17 00:00:00 2001
From: devanshu052000 <devanshu.rastogi05@gmail.com>
Date: Mon, 24 Mar 2025 07:09:27 +0530
Subject: [PATCH 2/3] Fix multiselect crash issue.

---
 .../src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx
index db52205467..370aaf87ac 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx
@@ -295,7 +295,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}

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 3/3] 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);