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] 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}