Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-22 08:28:35 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 8

Merge pull request #12713 from ToolJet/fix/sprint-11-dropdown-multiselect

Browse source 
Fix: Dropdown and Multiselect related integration bugs for sprint 11
This commit is contained in:
Johnson Cherian 2025-04-28 18:43:25 +05:30 committed by GitHub
commit 02459de3da
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 21 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx
View file

@ -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);

9
frontend/src/Editor/Components/DropdownV2/utils.js
View file

@ -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 (
<span>
{parts.map((part, index) =>

6
frontend/src/Editor/Components/MultiselectV2/CustomValueContainer.jsx
View file

@ -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

6
frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx
View file

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