Merge pull request #3529 from czwe-01/thulasizwe/en/dropdown-tag

fix: search for values data source

Author: James-Baloyi

shesha-reactjs/src/components/dropdown/dropdown.tsx

@@ -107,6 +107,13 @@ export const Dropdown: FC<IDropdownProps> = ({
         };
     }, [labelCustomJs, outcomeValueFunc, incomeValueFunc]);
 
+    const filterOption = (input, option) => {
+        if (typeof option?.children === 'string' && typeof input === 'string') {
+            return option?.children?.toLowerCase().indexOf(input?.toLowerCase()) >= 0;
+        }
+        return false;
+    };
+
     if (dataSourceType === 'referenceList') {
         return (
             <GenericRefListDropDown<any>
@@ -131,6 +138,7 @@ export const Dropdown: FC<IDropdownProps> = ({
                 getLabeledValue={getLabeledValue}
                 getOptionFromFetchedItem={getOptionFromFetchedItem}
                 displayStyle={displayStyle}
+                filterOption={filterOption}
                 incomeValueFunc={incomeValueFunc}
                 outcomeValueFunc={outcomeValueFunc}
             />
@@ -146,6 +154,8 @@ export const Dropdown: FC<IDropdownProps> = ({
         return options?.filter(({ value: currentValue }) => selectedValues.indexOf(currentValue) > -1)?.map(({ label }) => ({ label }));
     };
 
+
+
     if (readOnly) {
         return <ReadOnlyDisplayFormItem
             showIcon={showIcon}
@@ -181,6 +191,8 @@ export const Dropdown: FC<IDropdownProps> = ({
             popupMatchSelectWidth={false}
             style={{ width: 'max-content', height: 'max-content' }}
             placeholder={placeholder}
+            showSearch
+            filterOption={filterOption}
             labelRender={(props) => {
                 const option = options.find((o) => o.value === props.value);
                 return <ReflistTag
@@ -210,6 +222,7 @@ export const Dropdown: FC<IDropdownProps> = ({
             {...commonSelectProps}
             style={{ ...style }}
             showSearch
+            filterOption={filterOption}
             placeholder={placeholder}
             {...(displayStyle === 'tags' ? {
                 labelRender: (props) => {
@@ -230,7 +243,7 @@ export const Dropdown: FC<IDropdownProps> = ({
             }
         >
             {options?.map(({ value: localValue, label }) => (
-                <Select.Option value={localValue} key={localValue}>
+                <Select.Option value={localValue} key={label}>
                     {label}
                 </Select.Option>
             ))}

shesha-reactjs/src/components/refListDropDown/genericRefListDropDown.tsx

@@ -27,6 +27,7 @@ export const GenericRefListDropDown = <TValue,>(props: IGenericRefListDropDownPr
     getOptionFromFetchedItem,
     incomeValueFunc,
     outcomeValueFunc,
+    filterOption,
     displayStyle,
     tagStyle,
     showIcon,
@@ -148,12 +149,7 @@ export const GenericRefListDropDown = <TValue,>(props: IGenericRefListDropDownPr
     allowClear,
     loading: refListLoading,
     disabled,
-    filterOption: (input, option) => {
-      if (typeof option?.children === 'string' && typeof input === 'string') {
-        return option?.children?.toLowerCase().indexOf(input?.toLowerCase()) >= 0;
-      }
-      return false;
-    },
+    filterOption: filterOption,
     ...rest,
     onChange: handleChange,
     value: wrapValue(value, options),

shesha-reactjs/src/designer-components/dropdown/index.tsx

@@ -63,7 +63,7 @@ const DropdownComponent: IToolboxComponent<IDropdownComponentProps, ITextFieldCo
             defaultValue={calculatedModel.defaultValue}
             value={value}
             size={model?.size}
-            tagStyle={{ ...tagStyle, justifyContent: tagStyle?.textAlign }}
+            tagStyle={{ ...tagStyle, alignContent: 'center' }}
             onChange={onChangeInternal}
           />;
         }}

shesha-reactjs/src/designer-components/dropdown/utils.ts

@@ -39,7 +39,8 @@ export const defaultTagStyles = (): IStyleType => {
             weight: '400',
             size: 14,
             color: '#000',
-            type: 'Segoe UI'
+            type: 'Segoe UI',
+            align: 'center'
         },
         border: {
             border: {

shesha-reactjs/src/designer-components/numberField/numberField.tsx

@@ -78,7 +78,7 @@ const NumberFieldComponent: IToolboxComponent<INumberFieldComponentProps, INumbe
         {(value, onChange) => {
           const customEvents = calculatedModel.eventHandlers;
           const onChangeInternal = (val: React.ChangeEvent<HTMLInputElement>) => {
-            const newValue = !val ? undefined : model.highPrecision ? val : parseInt(val + '', 10);
+            const newValue = val === undefined ? undefined : model.highPrecision ? val : parseInt(val + '', 10);
             customEvents.onChange(newValue);
             onChange(newValue);
           };