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 = ({
/>
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(', ')}
)}
+ {/* 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;
+ }
+ })}
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}