diff --git a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
index 5c01bdc62..059dd3852 100644
--- a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
@@ -34,7 +34,6 @@ import { trans } from "i18n";
 import { IconControl } from "comps/controls/iconControl";
 import { hasIcon } from "comps/utils";
 import { InputRef } from "antd/es/input";
-import { default as  AntInputSearch } from "antd/es/input/Search";
 import { default as ConfigProvider } from "antd/es/config-provider";
 import { default as AutoComplete } from "antd/es/auto-complete";
 import { RefControl } from "comps/controls/refControl";
@@ -54,40 +53,21 @@ import {
   componentSize,
 } from "./autoCompleteConstants";
 
-// const InputStyle = styled(Input)<{ $style: InputLikeStyleType }>`
-//   ${(props) => props.$style && getStyle(props.$style) }
-// `;
+
 
 const InputStyle = styled(Input)<{ $style: InputLikeStyleType }>`
   ${(props) => css`
     ${getStyle(props.$style)}
-    .ant-select-selection-search-input {
-      height: 100%;
-    }
     input {
-      padding: ${props.style?.padding}
+      padding: ${props.style?.padding};
     }
-  `}
-`;
-
-const CustomStyledSearch = styled(AntInputSearch)<{ $style: InputLikeStyleType }>`
-  ${(props) => css`
-    padding: 0;
-    input.ant-input {
-      padding: ${props.$style?.padding};
-    }
-    .ant-btn.ant-input-search-button {
-      height: 100%;
-      padding: ${props.$style?.padding} !important;
-      padding-left: 15px !important;
-      padding-right: 15px !important;
-      .ant-btn-icon {
-        line-height: 28px;
-      }
+    .ant-select-single {
+      width: 100% !important;
     }
   `}
 `;
 
+
 const childrenMap = {
   ...textInputChildren,
   viewRef: RefControl<InputRef>,
@@ -131,6 +111,7 @@ let AutoCompleteCompBase = (function () {
       autocompleteIconColor,
       componentSize,
     } = props;
+    
 
     const getTextInputValidate = () => {
       return {
@@ -181,19 +162,20 @@ let AutoCompleteCompBase = (function () {
               },
             }}
           >
-            <AutoComplete
+            <AutoComplete 
               disabled={props.disabled}
               value={searchtext}
-              options={items}
+              options={items} 
+              style={{ width: "100%" }}
               onChange={(value: string, option) => {
                 props.valueInItems.onChange(false);
                 setvalidateState(textInputValidate(getTextInputValidate()));
                 setsearchtext(value);
-                props.value.onChange(value);
+                props.value.onChange(value); 
                 props.onEvent("change")
-              }}
+              }} 
               onFocus={() => {
-                setActivationFlag(true)
+                setActivationFlag(true) 
                 props.onEvent("focus")
               }}
               onBlur={() => props.onEvent("blur")}
@@ -280,22 +262,7 @@ let AutoCompleteCompBase = (function () {
                 return false;
               }}
             >
-              {autoCompleteType === "AntDesign" ? (
-                <CustomStyledSearch
-                  placeholder={placeholder}
-                  enterButton={autocompleteIconColor === "blue"}
-                  allowClear={props.allowClear}
-                  ref={props.viewRef}
-                  onPressEnter={undefined}
-                  status={getValidate(validateState)}
-                  onSubmit={() => props.onEvent("submit")}
-                  $style={props.style}
-                />
-              ) : (
                 <InputStyle
-                  // style={{
-                  //   height: componentSize === "small" ? "30px" : "38px",
-                  // }}
                   ref={props.viewRef}
                   placeholder={placeholder}
                   allowClear={props.allowClear}
@@ -305,29 +272,18 @@ let AutoCompleteCompBase = (function () {
                   status={getValidate(validateState)}
                   onPressEnter={undefined}
                 />
-              )}
             </AutoComplete>
           </ConfigProvider>
         </>
       ),
-      style: props.style,
-      ...validateState,
+      // style: props.style,
+      // ...validateState,
     });
   })
     .setPropertyViewFn((children) => {
       return (
         <>
-          <Section name={trans("autoComplete.ComponentType")}>
-            {children.autoCompleteType.propertyView({
-              label: trans("autoComplete.type"),
-              radioButton: true,
-            })}
-            {children.autoCompleteType.getView() === "AntDesign" &&
-              children.autocompleteIconColor.propertyView({
-                label: trans("button.prefixIcon"),
-                radioButton: true,
-              })}
-
+          <Section>
             {children.autoCompleteType.getView() === "normal" &&
               children.prefixIcon.propertyView({
                 label: trans("button.prefixIcon"),
@@ -403,6 +359,6 @@ export const AutoCompleteComp = withExposingConfigs(AutoCompleteCompBase, [
   new NameConfig("value", trans("export.inputValueDesc")),
   new NameConfig("valueInItems", trans("autoComplete.valueInItems")),
   NameConfigPlaceHolder,
-  NameConfigRequired,
+  NameConfigRequired, 
   ...TextInputConfigs,
 ]);
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
index 4f5a0ba18..ca5a6648b 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
@@ -7,7 +7,7 @@ import {
 import { BoolControl } from "../../controls/boolControl";
 import { LabelControl } from "../../controls/labelControl";
 import { BoolCodeControl, StringControl } from "../../controls/codeControl";
-import { PaddingControl } from "../../controls/paddingControl";	
+import { PaddingControl } from "../../controls/paddingControl";
 import { MarginControl } from "../../controls/marginControl";
 import {
   ControlNode,
@@ -27,14 +27,17 @@ import {
   SelectInputValidationChildren,
   SelectInputValidationSection,
 } from "./selectInputConstants";
-import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants";
+import {
+  formDataChildren,
+  FormDataPropertyView,
+} from "../formComp/formDataConstants";
 import {
   CascaderStyleType,
   MultiSelectStyleType,
   SelectStyleType,
   TreeSelectStyleType,
   widthCalculator,
-  heightCalculator
+  heightCalculator,
 } from "comps/controls/styleControlConstants";
 import { stateComp, withDefault } from "../../generators";
 import {
@@ -55,34 +58,39 @@ import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 
 export const getStyle = (
-  style: SelectStyleType | MultiSelectStyleType | CascaderStyleType | TreeSelectStyleType
+  style:
+    | SelectStyleType
+    | MultiSelectStyleType
+    | CascaderStyleType
+    | TreeSelectStyleType
 ) => {
   return css`
     &.ant-select .ant-select-selector,
     &.ant-select-multiple .ant-select-selection-item {
       border-radius: ${style.radius};
-      padding: ${style.padding};	
-      height: auto;	
-    }	
-    .ant-select-selection-search {	
-      padding: ${style.padding};	
-    }	
-    .ant-select-selector::after,	
-    .ant-select-selection-placeholder,	
-    .ant-select-selection-item {	
+      padding: ${style.padding};
+      height: auto;
+    }
+    .ant-select-selection-search {
+      padding: ${style.padding};
+    }
+    .ant-select-selector::after,
+    .ant-select-selection-placeholder,
+    .ant-select-selection-item {
       line-height: 1.5715 !important;
     }
 
     &.ant-select:not(.ant-select-disabled) {
       color: ${style.text};
-      .ant-select-selection-placeholder,	
-      .ant-select-selection-item {	
-        line-height: 1.5715 !important;	
+      .ant-select-selection-placeholder,
+      .ant-select-selection-item {
+        line-height: 1.5715 !important;
       }
       .ant-select-selection-placeholder,
       &.ant-select-single.ant-select-open .ant-select-selection-item {
         color: ${style.text};
         opacity: 0.4;
+        width: 100%;
       }
 
       .ant-select-selector {
@@ -103,16 +111,16 @@ export const getStyle = (
         color: ${style.text === "#222222"
           ? "#8B8FA3"
           : isDarkColor(style.text)
-          ? lightenColor(style.text, 0.2)
-          : style.text};
+            ? lightenColor(style.text, 0.2)
+            : style.text};
       }
 
       .ant-select-clear:hover {
         color: ${style.text === "#222222"
           ? "#8B8FA3"
           : isDarkColor(style.text)
-          ? lightenColor(style.text, 0.1)
-          : style.text};
+            ? lightenColor(style.text, 0.1)
+            : style.text};
       }
 
       &.ant-select-multiple .ant-select-selection-item {
@@ -160,7 +168,9 @@ const getDropdownStyle = (style: MultiSelectStyleType) => {
   `;
 };
 
-const Select = styled(AntdSelect)<{ $style: SelectStyleType & MultiSelectStyleType }>`
+const Select = styled(AntdSelect)<{
+  $style: SelectStyleType & MultiSelectStyleType;
+}>`
   width: 100%;
 
   ${(props) => props.$style && getStyle(props.$style)}
@@ -169,7 +179,7 @@ const Select = styled(AntdSelect)<{ $style: SelectStyleType & MultiSelectStyleTy
 const DropdownStyled = styled.div<{ $style: MultiSelectStyleType }>`
   ${(props) => props.$style && getDropdownStyle(props.$style)}
   .ant-select-item-option-content {
-    ${(props) => `padding: ${props.$style.padding}`};	
+    ${(props) => `padding: ${props.$style.padding}`};
   }
   .option-label img {
     min-width: 14px;
@@ -197,7 +207,7 @@ export const SelectChildrenMap = {
   inputValue: stateComp<string>(""), // user's input value when search
   showSearch: BoolControl.DEFAULT_TRUE,
   viewRef: RefControl<BaseSelectRef>,
-  margin: MarginControl,	
+  margin: MarginControl,
   padding: PaddingControl,
   ...SelectInputValidationChildren,
   ...formDataChildren,
@@ -221,9 +231,13 @@ export const SelectUIView = (
     placeholder={props.placeholder}
     value={props.value}
     showSearch={props.showSearch}
-    filterOption={(input, option) => option?.label.toLowerCase().includes(input.toLowerCase())}
+    filterOption={(input, option) =>
+      option?.label.toLowerCase().includes(input.toLowerCase())
+    }
     dropdownRender={(originNode: ReactNode) => (
-      <DropdownStyled $style={props.style as MultiSelectStyleType}>{originNode}</DropdownStyled>
+      <DropdownStyled $style={props.style as MultiSelectStyleType}>
+        {originNode}
+      </DropdownStyled>
     )}
     dropdownStyle={{
       padding: 0,
@@ -250,8 +264,8 @@ export const SelectUIView = (
           key={option.value}
         >
           <Wrapper className="option-label">
-            {props.options.findIndex((option) => hasIcon(option.prefixIcon)) > -1 &&
-              option.prefixIcon}
+            {props.options.findIndex((option) => hasIcon(option.prefixIcon)) >
+              -1 && option.prefixIcon}
             {<span>{option.label}</span>}
           </Wrapper>
         </Select.Option>
@@ -273,24 +287,28 @@ export const SelectPropertyView = (
   <>
     <Section name={sectionNames.basic}>
       {children.options.propertyView({})}
-      {children.defaultValue.propertyView({ label: trans("prop.defaultValue") })}
+      {children.defaultValue.propertyView({
+        label: trans("prop.defaultValue"),
+      })}
       {placeholderPropertyView(children)}
     </Section>
 
     {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
-      <><>
-        <SelectInputValidationSection {...children} />
-        <FormDataPropertyView {...children} />
-      </><Section name={sectionNames.interaction}>
+      <>
+        <>
+          <SelectInputValidationSection {...children} />
+          <FormDataPropertyView {...children} />
+        </>
+        <Section name={sectionNames.interaction}>
           {children.onEvent.getPropertyView()}
           {disabledPropertyView(children)}
           {hiddenPropertyView(children)}
-        </Section></>
+        </Section>
+      </>
     )}
 
-    {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
-      children.label.getPropertyView()
-    )}
+    {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) &&
+      children.label.getPropertyView()}
 
     {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
       <Section name={sectionNames.advanced}>
@@ -299,7 +317,9 @@ export const SelectPropertyView = (
       </Section>
     )}
 
-    {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+    {["layout", "both"].includes(
+      useContext(EditorContext).editorModeStatus
+    ) && (
       <Section name={sectionNames.style}>
         {children.style.getPropertyView()}
       </Section>
@@ -307,4 +327,7 @@ export const SelectPropertyView = (
   </>
 );
 
-export const baseSelectRefMethods = refMethods<BaseSelectRef>([focusMethod, blurMethod]);
+export const baseSelectRefMethods = refMethods<BaseSelectRef>([
+  focusMethod,
+  blurMethod,
+]);
diff --git a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
index 9cc05a154..bfa0f20cf 100644
--- a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
+++ b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
@@ -12,18 +12,26 @@ import {
   ToNodeType,
   ViewFnTypeForComp,
 } from "./multi";
-import { ChildrenToComp, ExposingConfig, withExposingConfigs } from "./withExposing";
+import {
+  ChildrenToComp,
+  ExposingConfig,
+  withExposingConfigs,
+} from "./withExposing";
 import {
   ExposeMethodCompConstructor,
   MethodConfigsType,
   withMethodExposing,
 } from "./withMethodExposing";
 
-export type NewChildren<ChildrenCompMap extends Record<string, Comp<unknown>>> = ChildrenCompMap & {
-  hidden: InstanceType<typeof BoolCodeControl>;
-};
+export type NewChildren<ChildrenCompMap extends Record<string, Comp<unknown>>> =
+  ChildrenCompMap & {
+    hidden: InstanceType<typeof BoolCodeControl>;
+  };
 
-export function HidableView(props: { children: JSX.Element | React.ReactNode; hidden: boolean }) {
+export function HidableView(props: {
+  children: JSX.Element | React.ReactNode;
+  hidden: boolean;
+}) {
   const { readOnly } = useContext(ExternalEditorContext);
   if (readOnly) {
     return <>{props.children}</>;
@@ -31,7 +39,9 @@ export function HidableView(props: { children: JSX.Element | React.ReactNode; hi
     return (
       <>
         {props.hidden ? (
-          <div style={{ opacity: "50%", width: "100%", height: "100%" }}>{props.children}</div>
+          <div style={{ opacity: "50%", width: "100%", height: "100%" }}>
+            {props.children}
+          </div>
         ) : (
           <>{props.children}</>
         )}
@@ -40,7 +50,9 @@ export function HidableView(props: { children: JSX.Element | React.ReactNode; hi
   }
 }
 
-export function uiChildren<ChildrenCompMap extends Record<string, Comp<unknown>>>(
+export function uiChildren<
+  ChildrenCompMap extends Record<string, Comp<unknown>>,
+>(
   childrenMap: ToConstructor<ChildrenCompMap>
 ): ToConstructor<NewChildren<ChildrenCompMap>> {
   return { ...childrenMap, hidden: BoolCodeControl } as any;
@@ -51,12 +63,17 @@ type ViewReturn = ReactNode;
 /**
  * UI components can be constructed with this class, providing the hidden interface
  */
-export class UICompBuilder<ChildrenCompMap extends Record<string, Comp<unknown>>> {
+export class UICompBuilder<
+  ChildrenCompMap extends Record<string, Comp<unknown>>,
+> {
   private childrenMap: ToConstructor<ChildrenCompMap>;
   private viewFn: ViewFnTypeForComp<ViewReturn, NewChildren<ChildrenCompMap>>;
-  private propertyViewFn: PropertyViewFnTypeForComp<NewChildren<ChildrenCompMap>> = () => null;
+  private propertyViewFn: PropertyViewFnTypeForComp<
+    NewChildren<ChildrenCompMap>
+  > = () => null;
   private stateConfigs: ExposingConfig<ChildrenToComp<ChildrenCompMap>>[] = [];
-  private methodConfigs: MethodConfigsType<ExposeMethodCompConstructor<any>> = [];
+  private methodConfigs: MethodConfigsType<ExposeMethodCompConstructor<any>> =
+    [];
 
   /**
    * If viewFn is not placed in the constructor, the type of ViewReturn cannot be inferred
@@ -69,18 +86,24 @@ export class UICompBuilder<ChildrenCompMap extends Record<string, Comp<unknown>>
     this.viewFn = viewFn;
   }
 
-  setPropertyViewFn(propertyViewFn: PropertyViewFnTypeForComp<NewChildren<ChildrenCompMap>>) {
+  setPropertyViewFn(
+    propertyViewFn: PropertyViewFnTypeForComp<NewChildren<ChildrenCompMap>>
+  ) {
     this.propertyViewFn = propertyViewFn;
     return this;
   }
 
-  setExposeStateConfigs(configs: ExposingConfig<ChildrenToComp<ChildrenCompMap>>[]) {
+  setExposeStateConfigs(
+    configs: ExposingConfig<ChildrenToComp<ChildrenCompMap>>[]
+  ) {
     this.stateConfigs = configs;
     return this;
   }
 
   setExposeMethodConfigs(
-    configs: MethodConfigsType<ExposeMethodCompConstructor<MultiBaseComp<ChildrenCompMap>>>
+    configs: MethodConfigsType<
+      ExposeMethodCompConstructor<MultiBaseComp<ChildrenCompMap>>
+    >
   ) {
     this.methodConfigs = configs;
     return this;
@@ -113,14 +136,18 @@ export class UICompBuilder<ChildrenCompMap extends Record<string, Comp<unknown>>
       }
 
       override getPropertyView(): ReactNode {
-        return <PropertyView comp={this} propertyViewFn={builder.propertyViewFn} />;
+        return (
+          <PropertyView comp={this} propertyViewFn={builder.propertyViewFn} />
+        );
       }
     }
 
     return withExposingConfigs(
       withMethodExposing(
         MultiTempComp,
-        this.methodConfigs as MethodConfigsType<ExposeMethodCompConstructor<MultiTempComp>>
+        this.methodConfigs as MethodConfigsType<
+          ExposeMethodCompConstructor<MultiTempComp>
+        >
       ) as typeof MultiTempComp,
       this.stateConfigs
     );
@@ -134,12 +161,26 @@ export const DisabledContext = React.createContext<boolean>(false);
  */
 function UIView(props: { comp: any; viewFn: any }) {
   const comp = props.comp;
+  console.log(comp);
+
+  console.log(comp.children);
+
   const childrenProps = childrenToProps(comp.children);
   const parentDisabled = useContext(DisabledContext);
   const disabled = childrenProps["disabled"];
   if (disabled !== undefined && typeof disabled === "boolean") {
     childrenProps["disabled"] = disabled || parentDisabled;
   }
+
+  //ADDED BY FRED
+  if (childrenProps.events) {
+    const events = childrenProps.events as { value?: any[] };
+    if (!events.value || events.value.length === 0) {
+      events.value = [];
+    }
+  }
+  //END ADD BY FRED
+
   return (
     <HidableView hidden={childrenProps.hidden as boolean}>
       {props.viewFn(childrenProps, comp.dispatch)}
diff --git a/client/packages/lowcoder/src/comps/utils/index.tsx b/client/packages/lowcoder/src/comps/utils/index.tsx
index d0ff1dcb6..1dda47b1e 100644
--- a/client/packages/lowcoder/src/comps/utils/index.tsx
+++ b/client/packages/lowcoder/src/comps/utils/index.tsx
@@ -84,4 +84,4 @@ export function arrayMove<T>(data: Array<T>, start: number, end: number) {
   return result;
 }
 
-export const hasIcon = (icon: ReactNode) => (icon as ReactElement).props.value;
+export const hasIcon = (icon: ReactNode) => (icon as ReactElement).props?.value;