diff --git a/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx b/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx index 1f3c4dc451..7bbf665839 100644 --- a/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx +++ b/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx @@ -267,6 +267,11 @@ export const DropdownV2 = ({ setExposedVariable('isMandatory', isMandatory); }, [isMandatory]); + useEffect(() => { + if (isInitialRender.current) return; + setExposedVariable('value', currentValue); + }, [currentValue]); + useEffect(() => { if (isInitialRender.current) return; const validationStatus = validate(currentValue); diff --git a/frontend/src/Editor/Components/DropdownV2/utils.js b/frontend/src/Editor/Components/DropdownV2/utils.js index ed58cbe73d..814b7b341a 100644 --- a/frontend/src/Editor/Components/DropdownV2/utils.js +++ b/frontend/src/Editor/Components/DropdownV2/utils.js @@ -52,7 +52,14 @@ export const getInputBackgroundColor = ({ fieldBackgroundColor, darkMode, isLoad }; export const highlightText = (text = '', highlight) => { - const parts = text?.split(new RegExp(`(${highlight})`, 'gi')); + // Escape special regex characters in the highlight string + const escapeRegExp = (string) => { + return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); + }; + + const safeHighlight = highlight ? escapeRegExp(highlight) : ''; + const parts = text?.split(new RegExp(`(${safeHighlight})`, 'gi')); + return ( {parts.map((part, index) => diff --git a/frontend/src/Editor/Components/MultiselectV2/CustomValueContainer.jsx b/frontend/src/Editor/Components/MultiselectV2/CustomValueContainer.jsx index 62db4a2a0d..d167818036 100644 --- a/frontend/src/Editor/Components/MultiselectV2/CustomValueContainer.jsx +++ b/frontend/src/Editor/Components/MultiselectV2/CustomValueContainer.jsx @@ -6,7 +6,11 @@ import './multiselectV2.scss'; const CustomValueContainer = ({ children, ...props }) => { const selectProps = props.selectProps; - const values = Array.isArray(selectProps?.value) && selectProps?.value?.map((option) => option.label); + const values = + Array.isArray(selectProps?.value) && + selectProps?.value + ?.filter((option) => option.value !== 'multiselect-custom-menulist-select-all') //Remove the Select all option if selected + ?.map((option) => option.label); const isAllOptionsSelected = selectProps?.value.length === selectProps.options.length; const valueContainerWidth = selectProps?.containerRef?.current?.offsetWidth; // eslint-disable-next-line import/namespace diff --git a/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx b/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx index db44bc15f8..78b7c79552 100644 --- a/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx +++ b/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx @@ -146,7 +146,7 @@ export const MultiselectV2 = ({ if (action.option?.value === SELECT_ALL) { // Case 1 - If select all is selected if (action.action === 'select-option') { - setInputValue(modifiedSelectOptions); + setInputValue(selectOptions); } else { setInputValue([]); } @@ -155,7 +155,7 @@ export const MultiselectV2 = ({ setInputValue(items.filter((item) => item.value !== SELECT_ALL)); } else if (selectOptions?.length === items?.length) { // Case 3 - If all options are selected except select all - setInputValue(modifiedSelectOptions); + setInputValue(selectOptions); } else { // Case 4 - Normal selection setInputValue(items); @@ -503,7 +503,7 @@ export const MultiselectV2 = ({ ref={selectRef} menuId={id} isDisabled={isMultiSelectDisabled} - value={selected} + value={selectOptions?.length === selected?.length ? modifiedSelectOptions : selected} onChange={onChangeHandler} options={modifiedSelectOptions} styles={customStyles}