Merge pull request #1801 from kamalqureshi/custom_tag_multiselect

Custom Tags for Multiselect

Author: raheeliftikhar5

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: (
         <SelectUIView
           {...props}
-          mode={"multiple"}
-          value={props.value.value.filter?.((v) => valueSet.has(v))}
+          mode={props.allowCustomTags ? "tags" : "multiple"}
+          value={props.allowCustomTags ? props.value.value : removeIllegalEntries()}
           onChange={handleChange}
           dispatch={dispatch}
         />

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={(originNode: ReactNode) => (
       <DropdownStyled $style={props.childrenInputFieldStyle as ChildrenMultiSelectStyleType}>
         {originNode}

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<typeof SelectInputValidationChildren>;
@@ -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({})}
   </Section>
 );

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",