Content-Length: 5112 | pFad | http://github.com/lowcoder-org/lowcoder/pull/1801.patch

thub.com From cf94b9491e4637de822e9890bffa9f05039e0524 Mon Sep 17 00:00:00 2001 From: Kamal Qureshi Date: Mon, 23 Jun 2025 07:04:08 -0700 Subject: [PATCH] Adds ability to add custom tags for multiselect component --- .../comps/comps/selectInputComp/multiSelectComp.tsx | 10 +++++++--- .../comps/selectInputComp/selectCompConstants.tsx | 10 ++++++---- .../comps/selectInputComp/selectInputConstants.tsx | 4 ++++ client/packages/lowcoder/src/i18n/locales/en.ts | 1 + 4 files changed, 18 insertions(+), 7 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx index 925e9d0212..8380c56722 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx @@ -14,7 +14,7 @@ import { SelectInputInvalidConfig, useSelectInputValidate } from "./selectInputC import { PaddingControl } from "../../controls/paddingControl"; import { MarginControl } from "../../controls/marginControl"; -import { migrateOldData, withDefault } from "comps/generators/simpleGenerators"; +import { migrateOldData } from "comps/generators/simpleGenerators"; import { fixOldInputCompData } from "../textInputComp/textInputConstants"; let MultiSelectBasicComp = (function () { @@ -35,6 +35,10 @@ let MultiSelectBasicComp = (function () { validateState, handleChange, ] = useSelectInputValidate(props); + + const removeIllegalEntries = () => { + return props.value.value.filter?.((v) => valueSet.has(v)) + } return props.label({ required: props.required, @@ -45,8 +49,8 @@ let MultiSelectBasicComp = (function () { children: ( valueSet.has(v))} + mode={props.allowCustomTags ? "tags" : "multiple"} + value={props.allowCustomTags ? props.value.value : removeIllegalEntries()} onChange={handleChange} dispatch={dispatch} /> diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx index 0da2dce212..a5d55ca935 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx @@ -76,7 +76,8 @@ export const getStyle = ( padding: ${style.padding}; height: auto; } - .ant-select-selection-search { + .ant-select-selection-search { + min-width: 50px; padding: ${style.padding}; } .ant-select-selection-search-input, @@ -268,9 +269,10 @@ export const SelectUIView = ( placeholder={props.placeholder} value={props.value} showSearch={props.showSearch} - filterOption={(input, option) => - option?.label.toLowerCase().includes(input.toLowerCase()) - } + filterOption={(input, option) => { + if (!option) return false; + return String(option.label ?? option.value ?? "").toLowerCase().includes(input.toLowerCase()); + }} popupRender={(origenNode: ReactNode) => ( {origenNode} diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectInputConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectInputConstants.tsx index 75f275c3ca..290f3628d5 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectInputConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectInputConstants.tsx @@ -19,6 +19,7 @@ import { blurMethod, focusWithOptions } from "comps/utils/methodUtils"; export const SelectInputValidationChildren = { required: BoolControl, showValidationWhenEmpty: BoolControl, + allowCustomTags: BoolControl, customRule: CustomRuleControl, }; type ValidationComp = RecordConstructorToComp; @@ -126,6 +127,9 @@ export const SelectInputValidationSection = (children: ValidationComp) => ( {children.showValidationWhenEmpty.propertyView({ label: trans("prop.showEmptyValidation"), })} + {children.allowCustomTags.propertyView({ + label: trans("prop.customTags") + })} {children.customRule.propertyView({})} ); diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 48774170c9..44f5f4b1dd 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -234,6 +234,7 @@ export const en = { "verticalGridCells": "Vertical Grid Cells", "timeZone": "TimeZone", "pickerMode": "Picker Mode", + "customTags": "Custom Tags" }, "autoHeightProp": { "auto": "Auto",

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier! Saves Data!