diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx index d250a4342e..71d8f9ead8 100644 --- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx +++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx @@ -539,6 +539,17 @@ export function Select({ componentMeta, darkMode, ...restProps }) { currentState, allComponents )} + {isMultiSelect && + renderElement( + component, + componentMeta, + paramUpdated, + dataQueries, + 'showAllSelectedLabel', + 'properties', + currentState, + allComponents + )} {isSortingEnabled && renderElement( component, diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js b/frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js index 294423abac..c9d89045aa 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js @@ -121,6 +121,12 @@ export const multiselectV2Config = { }, accordian: 'Options', }, + showAllSelectedLabel: { + type: 'toggle', + displayName: 'Show "All items are selected"', + validation: { schema: { type: 'boolean' }, defaultValue: true }, + accordian: 'Options', + }, optionsLoadingState: { type: 'toggle', displayName: 'Options loading state', @@ -339,6 +345,7 @@ export const multiselectV2Config = { optionsLoadingState: { value: '{{false}}' }, sort: { value: 'asc' }, placeholder: { value: 'Select the options' }, + showAllSelectedLabel: { value: '{{true}}' }, showClearBtn: { value: '{{true}}' }, showSearchInput: { value: '{{true}}' }, visibility: { value: '{{true}}' }, diff --git a/frontend/src/Editor/Components/MultiselectV2/CustomValueContainer.jsx b/frontend/src/Editor/Components/MultiselectV2/CustomValueContainer.jsx index 9eb11ea4c6..62db4a2a0d 100644 --- a/frontend/src/Editor/Components/MultiselectV2/CustomValueContainer.jsx +++ b/frontend/src/Editor/Components/MultiselectV2/CustomValueContainer.jsx @@ -36,7 +36,7 @@ const CustomValueContainer = ({ children, ...props }) => { ) : ( - {isAllOptionsSelected ? 'All items are selected.' : values.join(', ')} + {selectProps?.showAllSelectedLabel && isAllOptionsSelected ? 'All items are selected.' : values.join(', ')} )} {/* Rendering children except Placeholder component to preserve the default behavior of react-select like focus diff --git a/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx b/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx index c3fd384421..db44bc15f8 100644 --- a/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx +++ b/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx @@ -37,6 +37,7 @@ export const MultiselectV2 = ({ loadingState: multiSelectLoadingState, optionsLoadingState, sort, + showAllSelectedLabel, showClearBtn, showSearchInput, } = properties; @@ -544,6 +545,7 @@ export const MultiselectV2 = ({ icon={icon} doShowIcon={iconVisibility} containerRef={valueContainerRef} + showAllSelectedLabel={showAllSelectedLabel} iconColor={iconColor} optionsLoadingState={optionsLoadingState && advanced} darkMode={darkMode} diff --git a/frontend/src/Editor/WidgetManager/configs/multiselectV2.js b/frontend/src/Editor/WidgetManager/configs/multiselectV2.js index 0985f23d08..23618382df 100644 --- a/frontend/src/Editor/WidgetManager/configs/multiselectV2.js +++ b/frontend/src/Editor/WidgetManager/configs/multiselectV2.js @@ -121,6 +121,12 @@ export const multiselectV2Config = { }, accordian: 'Options', }, + showAllSelectedLabel: { + type: 'toggle', + displayName: 'Show "All items are selected"', + validation: { schema: { type: 'boolean' }, defaultValue: true }, + accordian: 'Options', + }, optionsLoadingState: { type: 'toggle', displayName: 'Options loading state', @@ -339,6 +345,7 @@ export const multiselectV2Config = { optionsLoadingState: { value: '{{false}}' }, sort: { value: 'asc' }, placeholder: { value: 'Select the options' }, + showAllSelectedLabel: { value: '{{true}}' }, showClearBtn: { value: '{{true}}' }, showSearchInput: { value: '{{true}}' }, visibility: { value: '{{true}}' }, diff --git a/server/src/modules/apps/services/widget-config/multiselectV2.js b/server/src/modules/apps/services/widget-config/multiselectV2.js index 294423abac..c9d89045aa 100644 --- a/server/src/modules/apps/services/widget-config/multiselectV2.js +++ b/server/src/modules/apps/services/widget-config/multiselectV2.js @@ -121,6 +121,12 @@ export const multiselectV2Config = { }, accordian: 'Options', }, + showAllSelectedLabel: { + type: 'toggle', + displayName: 'Show "All items are selected"', + validation: { schema: { type: 'boolean' }, defaultValue: true }, + accordian: 'Options', + }, optionsLoadingState: { type: 'toggle', displayName: 'Options loading state', @@ -339,6 +345,7 @@ export const multiselectV2Config = { optionsLoadingState: { value: '{{false}}' }, sort: { value: 'asc' }, placeholder: { value: 'Select the options' }, + showAllSelectedLabel: { value: '{{true}}' }, showClearBtn: { value: '{{true}}' }, showSearchInput: { value: '{{true}}' }, visibility: { value: '{{true}}' },