Jun 10, 2025 · Jun 6, 2025 · Jun 6, 2025 · Jun 6, 2025
diff --git a/...t/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/ColumnNumberComp.tsx b/...t/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/ColumnNumberComp.tsx
 import styled from "styled-components";
 import { IconControl } from "comps/controls/iconControl";
 import { hasIcon } from "comps/utils";
 import { clickEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";

 const InputNumberWrapper = styled.div`
  .ant-input-number  {
  }
 `;

 const NumberViewWrapper = styled.div`
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
 `;

 const NumberEventOptions = [clickEvent] as const;

 const childrenMap = {
  text: NumberControl,
  step: withDefault(NumberControl, 1),
  prefixIcon: IconControl,
  suffixIcon: IconControl,
  suffix: StringControl,
  onEvent: eventHandlerControl(NumberEventOptions),
 };

 const getBaseValue: ColumnTypeViewFn<typeof childrenMap, number, number> = (props) => props.text;
  suffixIcon: ReactNode;
  float: boolean;
  precision: number;
  onEvent?: (eventName: string) => void;
 };

 type NumberEditProps = {
    return result;
  }, [props.value, props.float, props.precision]);

  const handleClick = useCallback(() => {
    if (props.onEvent) {
      props.onEvent("click");
    }
  }, [props.onEvent]);

  return (
    <>
    <NumberViewWrapper onClick={handleClick}>
      {hasIcon(props.prefixIcon) && (
        <span>{props.prefixIcon}</span>
      )}
      <span>{props.prefix + formattedValue + props.suffix}</span>
      {hasIcon(props.suffixIcon) && (
        <span>{props.suffixIcon}</span>
      )}
    </>
    </NumberViewWrapper>
  );
 });

              children.step.dispatchChangeValueAction(String(newValue));
            }
          })}
          {children.onEvent.propertyView()}
        </>
      );
    })
diff --git a/.../packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnAvatarsComp.tsx b/.../packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnAvatarsComp.tsx
  cursor: pointer;
 `;

 const AvatarEventOptions = [clickEvent, refreshEvent] as const;

 const DropdownOption = new MultiCompBuilder(
  {
    src: StringControl,
    color: ColorControl,
    backgroundColor: ColorControl,
    Tooltip: StringControl,
    onEvent: eventHandlerControl(AvatarEventOptions),
  },
  (props) => props
 )
      {children.color.propertyView({ label: trans("style.fill") })}
      {children.backgroundColor.propertyView({ label: trans("style.background") })}
      {children.Tooltip.propertyView({ label: trans("badge.tooltip") })}
      {children.onEvent.propertyView()}
    </>
  );
 })
  style,
  autoColor,
  avatarSize,
  onEvent
  onEvent,
  onItemEvent
 }: {
  item: any;
  index: number;
  style: any;
  autoColor: boolean;
  avatarSize: number;
  onEvent: (event: string) => void;
  onEvent: (event: string) => void;
  onItemEvent?: (event: string) => void;
 }) => {
  const mountedRef = useRef(true);


  const handleClick = useCallback(() => {
    if (!mountedRef.current) return;

    // Trigger individual avatar event first
    if (onItemEvent) {
      onItemEvent("click");
    }

    // Then trigger main component event
    onEvent("click");
  }, [onEvent]);
  }, [onEvent, onItemEvent]);

  return (
    <Tooltip title={item.Tooltip} key={index}>
        style={{
          color: item.color ? item.color : (style.fill !== '#FFFFFF' ? style.fill : '#FFFFFF'),
          backgroundColor: item.backgroundColor ? item.backgroundColor : (autoColor ? MacaroneList[index % MacaroneList.length] : style.background),
          cursor: 'pointer',
        }}
        size={avatarSize}
        onClick={handleClick}
          autoColor={autoColor}
          avatarSize={avatarSize}
          onEvent={onEvent}
          onItemEvent={item.onEvent}
        />
      ))}
    </Avatar.Group>
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnImgComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnImgComp.tsx
 import { TacoImage } from "lowcoder-design";
 import styled from "styled-components";
 import { DEFAULT_IMG_URL } from "@lowcoder-ee/util/stringUtils";
 import { clickEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";

 export const ColumnValueTooltip = trans("table.columnValueTooltip");

 const childrenMap = {
  src: withDefault(StringControl, "{{currentCell}}"),
  size: withDefault(NumberControl, "50"),
  onEvent: eventHandlerControl([clickEvent]),
 };

 const StyledTacoImage = styled(TacoImage)`
  pointer-events: auto;
  pointer-events: auto !important;
  cursor: pointer !important;

  &:hover {
    opacity: 0.8;
    transition: opacity 0.2s ease;
  }
 `;

 // Memoized image component
 const ImageView = React.memo(({ src, size}: { src: string; size: number }) => {
 const ImageView = React.memo(({ src, size, onEvent}: { src: string; size: number; onEvent?: (eventName: string) => void }) => {
  const mountedRef = useRef(true);

  // Cleanup on unmount
    };
  }, []);

  const handleClick = useCallback(() => {
    console.log("Image clicked!", { src, onEvent: !!onEvent }); // Debug log
    if (mountedRef.current && onEvent) {
      onEvent("click");
    }
  }, [onEvent, src]);

  return (
    <StyledTacoImage
      src={src || DEFAULT_IMG_URL}
      width={size}
      onClick={handleClick}
      style={{ cursor: 'pointer' }} // Inline style as backup
    />
  );
 });
    childrenMap,
    (props, dispatch) => {
      const value = props.changeValue ?? getBaseValue(props, dispatch);
      return <ImageView src={value} size={props.size} />;
      return <ImageView src={value} size={props.size}onEvent={props.onEvent}/>;
    },
    (nodeValue) => nodeValue.src.value,
    getBaseValue
          {children.size.propertyView({
            label: trans("table.imageSize"),
          })}
          {children.onEvent.propertyView()}
        </>
      );
    })
diff --git a/...nt/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinksComp.tsx b/...nt/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinksComp.tsx
  .build();

 // Memoized menu item component
 const MenuItem = React.memo(({ option, index}: { option: any; index: number }) => {
 const MenuItem = React.memo(({ option, index, onMainEvent}: { option: any; index: number; onMainEvent?: (eventName: string) => void }) => {
  const handleClick = useCallback(() => {
    if (!option.disabled) {
      if (option.onClick) {
      if (option.onEvent) {
        option.onEvent("click");
      }
      // Trigger the main component's event handler
      if (onMainEvent) {
        onMainEvent("click");
      }
    }
  }, [option.disabled, option.onClick, option.onEvent]);
  }, [option.disabled, option.onClick, option.onEvent, onMainEvent]);

  return (
    <MenuLinkWrapper>
 MenuItem.displayName = 'MenuItem';

 // Memoized menu component
 const LinksMenu = React.memo(({ options}: { options: any[] }) => {
 const LinksMenu = React.memo(({ options, onEvent}: { options: any[]; onEvent?: (eventName: string) => void }) => {
  const mountedRef = useRef(true);

  // Cleanup on unmount
      .filter((o) => !o.hidden)
      .map((option, index) => ({
        key: index,
        label: <MenuItem option={option} index={index} />
        label: <MenuItem option={option} index={index}onMainEvent={onEvent}/>
      })),
    [options]
    [options, onEvent]
  );

  return (
    options: manualOptionsControl(OptionItem, {
      initOptions: [{ label: trans("table.option1") }],
    }),
    onEvent: eventHandlerControl(LinksEventOptions),
  };
  return new ColumnTypeCompBuilder(
    childrenMap,
    (props) => {
      return <LinksMenu options={props.options} />;
      return <LinksMenu options={props.options}onEvent={props.onEvent}/>;
    },
    () => ""
  )
          newOptionLabel: trans("table.option"),
          title: trans("table.optionList"),
        })}
        {children.onEvent.propertyView()}
      </>
    ))
    .build();
diff --git a/...packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnMarkdownComp.tsx b/...packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnMarkdownComp.tsx
 import { trans } from "i18n";
 import { markdownCompCss, TacoMarkDown } from "lowcoder-design";
 import styled from "styled-components";
 import { clickEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";

 const Wrapper = styled.div`
  ${markdownCompCss};
  max-height: 32px;
  cursor: pointer;

  > .markdown-body {
    margin: 0;
  }
 `;

 const MarkdownEventOptions = [clickEvent] as const;

 const childrenMap = {
  text: StringControl,
  onEvent: eventHandlerControl(MarkdownEventOptions),
 };

 const getBaseValue: ColumnTypeViewFn<typeof childrenMap, string, string> = (props) => props.text;

 // Memoized markdown view component
 const MarkdownView = React.memo(({ value }: { value: string }) => {
 const MarkdownView = React.memo(({ value, onEvent }: { value: string; onEvent?: (eventName: string) => void }) => {
  const handleClick = useCallback(() => {
    if (onEvent) {
      onEvent("click");
    }
  }, [onEvent]);

  return (
    <Wrapper>
    <Wrapper onClick={handleClick}>
      <TacoMarkDown>{value}</TacoMarkDown>
    </Wrapper>
  );
    childrenMap,
    (props, dispatch) => {
      const value = props.changeValue ?? getBaseValue(props, dispatch);
      return <MarkdownView value={value} />;
      return <MarkdownView value={value}onEvent={props.onEvent}/>;
    },
    (nodeValue) => nodeValue.text.value,
    getBaseValue
          label: trans("table.columnValue"),
          tooltip: ColumnValueTooltip,
        })}
        {children.onEvent.propertyView()}
      </>
    ))
    .build();
diff --git a/...t/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSelectComp.tsx b/...t/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSelectComp.tsx
 const childrenMap = {
  text: StringControl,
  options: SelectOptionWithEventsControl,
  onEvent: eventHandlerControl(SelectOptionEventOptions),
 };

 const getBaseValue: ColumnTypeViewFn<typeof childrenMap, string, string> = (props) => props.text;
  onChange: (value: string) => void;
  onChangeEnd: () => void;
  options: any[];
  onMainEvent?: (eventName: string) => void;
 };

 const SelectEdit = React.memo((props: SelectEditProps) => {
    if (selectedOption && selectedOption.onEvent) {
      selectedOption.onEvent("click");
    }
  }, [props.onChange, props.options]);

    // Also trigger the main component's event handler
    if (props.onMainEvent) {
      props.onMainEvent("click");
    }
  }, [props.onChange, props.options, props.onMainEvent]);

  const handleEvent = useCallback(async (eventName: string) => {
    if (!mountedRef.current) return [] as unknown[];
            options={props.otherProps?.options || []}
            onChange={props.onChange}
            onChangeEnd={props.onChangeEnd}
            onMainEvent={props.otherProps?.onEvent}
          />
        </Wrapper>
      )
          {children.options.propertyView({
            title: trans("optionsControl.optionList"),
          })}
          {children.onEvent.propertyView()}
        </>
      );
    })
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,6 +9,7 @@ import { withDefault } from "comps/generators";
		import styled from "styled-components";
		import { IconControl } from "comps/controls/iconControl";
		import { hasIcon } from "comps/utils";
		import { clickEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";

		const InputNumberWrapper = styled.div`
		.ant-input-number {
Expand All		@@ -25,6 +26,15 @@ const InputNumberWrapper = styled.div`
		}
		`;

		const NumberViewWrapper = styled.div`
		cursor: pointer;
		display: flex;
		align-items: center;
		gap: 4px;
		`;

		const NumberEventOptions = [clickEvent] as const;

		const childrenMap = {
		text: NumberControl,
		step: withDefault(NumberControl, 1),
Expand All		@@ -34,6 +44,7 @@ const childrenMap = {
		prefixIcon: IconControl,
		suffixIcon: IconControl,
		suffix: StringControl,
		onEvent: eventHandlerControl(NumberEventOptions),
		};

		const getBaseValue: ColumnTypeViewFn<typeof childrenMap, number, number> = (props) => props.text;
Expand All		@@ -46,6 +57,7 @@ type NumberViewProps = {
		suffixIcon: ReactNode;
		float: boolean;
		precision: number;
		onEvent?: (eventName: string) => void;
		};

		type NumberEditProps = {
Expand All		@@ -66,16 +78,22 @@ const ColumnNumberView = React.memo((props: NumberViewProps) => {
		return result;
		}, [props.value, props.float, props.precision]);

		const handleClick = useCallback(() => {
		if (props.onEvent) {
		props.onEvent("click");
		}
		}, [props.onEvent]);

		return (
		<>
		<NumberViewWrapper onClick={handleClick}>
		{hasIcon(props.prefixIcon) && (
		<span>{props.prefixIcon}</span>
		)}
		<span>{props.prefix + formattedValue + props.suffix}</span>
		{hasIcon(props.suffixIcon) && (
		<span>{props.suffixIcon}</span>
		)}
		</>
		</NumberViewWrapper>
		);
		});

Expand DownExpand Up		@@ -197,6 +215,7 @@ export const ColumnNumberComp = (function () {
		children.step.dispatchChangeValueAction(String(newValue));
		}
		})}
		{children.onEvent.propertyView()}
		</>
		);
		})
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -38,6 +38,8 @@ const Container = styled.div<{ $style: AvatarGroupStyleType \| undefined, alignme
		cursor: pointer;
		`;

		const AvatarEventOptions = [clickEvent, refreshEvent] as const;

		const DropdownOption = new MultiCompBuilder(
		{
		src: StringControl,
Expand All		@@ -46,6 +48,7 @@ const DropdownOption = new MultiCompBuilder(
		color: ColorControl,
		backgroundColor: ColorControl,
		Tooltip: StringControl,
		onEvent: eventHandlerControl(AvatarEventOptions),
		},
		(props) => props
		)
Expand All		@@ -63,6 +66,7 @@ const DropdownOption = new MultiCompBuilder(
		{children.color.propertyView({ label: trans("style.fill") })}
		{children.backgroundColor.propertyView({ label: trans("style.background") })}
		{children.Tooltip.propertyView({ label: trans("badge.tooltip") })}
		{children.onEvent.propertyView()}
		</>
		);
		})
Expand All		@@ -83,14 +87,16 @@ const MemoizedAvatar = React.memo(({
		style,
		autoColor,
		avatarSize,
		onEvent
		onEvent,
		onItemEvent
		}: {
		item: any;
		index: number;
		style: any;
		autoColor: boolean;
		avatarSize: number;
		onEvent: (event: string) => void;
		onEvent: (event: string) => void;
		onItemEvent?: (event: string) => void;
		}) => {
		const mountedRef = useRef(true);

Expand All		@@ -103,8 +109,15 @@ const MemoizedAvatar = React.memo(({

		const handleClick = useCallback(() => {
		if (!mountedRef.current) return;

		// Trigger individual avatar event first
		if (onItemEvent) {
		onItemEvent("click");
		}

		// Then trigger main component event
		onEvent("click");
		}, [onEvent]);
		}, [onEvent, onItemEvent]);

		return (
		<Tooltip title={item.Tooltip} key={index}>
Expand All		@@ -114,6 +127,7 @@ const MemoizedAvatar = React.memo(({
		style={{
		color: item.color ? item.color : (style.fill !== '#FFFFFF' ? style.fill : '#FFFFFF'),
		backgroundColor: item.backgroundColor ? item.backgroundColor : (autoColor ? MacaroneList[index % MacaroneList.length] : style.background),
		cursor: 'pointer',
		}}
		size={avatarSize}
		onClick={handleClick}
Expand DownExpand Up		@@ -162,6 +176,7 @@ const MemoizedAvatarGroup = React.memo(({
		autoColor={autoColor}
		avatarSize={avatarSize}
		onEvent={onEvent}
		onItemEvent={item.onEvent}
		/>
		))}
		</Avatar.Group>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -10,20 +10,28 @@ import { withDefault } from "comps/generators";
		import { TacoImage } from "lowcoder-design";
		import styled from "styled-components";
		import { DEFAULT_IMG_URL } from "@lowcoder-ee/util/stringUtils";
		import { clickEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";

		export const ColumnValueTooltip = trans("table.columnValueTooltip");

		const childrenMap = {
		src: withDefault(StringControl, "{{currentCell}}"),
		size: withDefault(NumberControl, "50"),
		onEvent: eventHandlerControl([clickEvent]),
		};

		const StyledTacoImage = styled(TacoImage)`
		pointer-events: auto;
		pointer-events: auto !important;
		cursor: pointer !important;

		&:hover {
		opacity: 0.8;
		transition: opacity 0.2s ease;
		}
		`;

		// Memoized image component
		const ImageView = React.memo(({ src, size}: { src: string; size: number }) => {
		const ImageView = React.memo(({ src, size, onEvent}: { src: string; size: number; onEvent?: (eventName: string) => void }) => {
		const mountedRef = useRef(true);

		// Cleanup on unmount
Expand All		@@ -33,10 +41,19 @@ const ImageView = React.memo(({ src, size }: { src: string; size: number }) => {
		};
		}, []);

		const handleClick = useCallback(() => {
		console.log("Image clicked!", { src, onEvent: !!onEvent }); // Debug log
		if (mountedRef.current && onEvent) {
		onEvent("click");
		}
		}, [onEvent, src]);

		return (
		<StyledTacoImage
		src={src \|\| DEFAULT_IMG_URL}
		width={size}
		onClick={handleClick}
		style={{ cursor: 'pointer' }} // Inline style as backup
		/>
		);
		});
Expand DownExpand Up		@@ -96,7 +113,7 @@ export const ImageComp = (function () {
		childrenMap,
		(props, dispatch) => {
		const value = props.changeValue ?? getBaseValue(props, dispatch);
		return <ImageView src={value} size={props.size} />;
		return <ImageView src={value} size={props.size}onEvent={props.onEvent}/>;
		},
		(nodeValue) => nodeValue.src.value,
		getBaseValue
Expand All		@@ -118,6 +135,7 @@ export const ImageComp = (function () {
		{children.size.propertyView({
		label: trans("table.imageSize"),
		})}
		{children.onEvent.propertyView()}
		</>
		);
		})
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -70,7 +70,7 @@ const OptionItem = new MultiCompBuilder(
		.build();

		// Memoized menu item component
		const MenuItem = React.memo(({ option, index}: { option: any; index: number }) => {
		const MenuItem = React.memo(({ option, index, onMainEvent}: { option: any; index: number; onMainEvent?: (eventName: string) => void }) => {
		const handleClick = useCallback(() => {
		if (!option.disabled) {
		if (option.onClick) {
Expand All		@@ -79,8 +79,12 @@ const MenuItem = React.memo(({ option, index }: { option: any; index: number })
		if (option.onEvent) {
		option.onEvent("click");
		}
		// Trigger the main component's event handler
		if (onMainEvent) {
		onMainEvent("click");
		}
		}
		}, [option.disabled, option.onClick, option.onEvent]);
		}, [option.disabled, option.onClick, option.onEvent, onMainEvent]);

		return (
		<MenuLinkWrapper>
Expand All		@@ -96,7 +100,7 @@ const MenuItem = React.memo(({ option, index }: { option: any; index: number })
		MenuItem.displayName = 'MenuItem';

		// Memoized menu component
		const LinksMenu = React.memo(({ options}: { options: any[] }) => {
		const LinksMenu = React.memo(({ options, onEvent}: { options: any[]; onEvent?: (eventName: string) => void }) => {
		const mountedRef = useRef(true);

		// Cleanup on unmount
Expand All		@@ -111,9 +115,9 @@ const LinksMenu = React.memo(({ options }: { options: any[] }) => {
		.filter((o) => !o.hidden)
		.map((option, index) => ({
		key: index,
		label: <MenuItem option={option} index={index} />
		label: <MenuItem option={option} index={index}onMainEvent={onEvent}/>
		})),
		[options]
		[options, onEvent]
		);

		return (
Expand All		@@ -130,11 +134,12 @@ export const ColumnLinksComp = (function () {
		options: manualOptionsControl(OptionItem, {
		initOptions: [{ label: trans("table.option1") }],
		}),
		onEvent: eventHandlerControl(LinksEventOptions),
		};
		return new ColumnTypeCompBuilder(
		childrenMap,
		(props) => {
		return <LinksMenu options={props.options} />;
		return <LinksMenu options={props.options}onEvent={props.onEvent}/>;
		},
		() => ""
		)
Expand All		@@ -144,6 +149,7 @@ export const ColumnLinksComp = (function () {
		newOptionLabel: trans("table.option"),
		title: trans("table.optionList"),
		})}
		{children.onEvent.propertyView()}
		</>
		))
		.build();
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,10 +9,12 @@ import { StringControl } from "comps/controls/codeControl";
		import { trans } from "i18n";
		import { markdownCompCss, TacoMarkDown } from "lowcoder-design";
		import styled from "styled-components";
		import { clickEvent, eventHandlerControl } from "comps/controls/eventHandlerControl";

		const Wrapper = styled.div`
		${markdownCompCss};
		max-height: 32px;
		cursor: pointer;

		> .markdown-body {
		margin: 0;
Expand All		@@ -22,16 +24,25 @@ const Wrapper = styled.div`
		}
		`;

		const MarkdownEventOptions = [clickEvent] as const;

		const childrenMap = {
		text: StringControl,
		onEvent: eventHandlerControl(MarkdownEventOptions),
		};

		const getBaseValue: ColumnTypeViewFn<typeof childrenMap, string, string> = (props) => props.text;

		// Memoized markdown view component
		const MarkdownView = React.memo(({ value }: { value: string }) => {
		const MarkdownView = React.memo(({ value, onEvent }: { value: string; onEvent?: (eventName: string) => void }) => {
		const handleClick = useCallback(() => {
		if (onEvent) {
		onEvent("click");
		}
		}, [onEvent]);

		return (
		<Wrapper>
		<Wrapper onClick={handleClick}>
		<TacoMarkDown>{value}</TacoMarkDown>
		</Wrapper>
		);
Expand DownExpand Up		@@ -92,7 +103,7 @@ export const ColumnMarkdownComp = (function () {
		childrenMap,
		(props, dispatch) => {
		const value = props.changeValue ?? getBaseValue(props, dispatch);
		return <MarkdownView value={value} />;
		return <MarkdownView value={value}onEvent={props.onEvent}/>;
		},
		(nodeValue) => nodeValue.text.value,
		getBaseValue
Expand All		@@ -110,6 +121,7 @@ export const ColumnMarkdownComp = (function () {
		label: trans("table.columnValue"),
		tooltip: ColumnValueTooltip,
		})}
		{children.onEvent.propertyView()}
		</>
		))
		.build();
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -116,6 +116,7 @@ const SelectOptionWithEventsControl = optionsControl(SelectOptionWithEvents, {
		const childrenMap = {
		text: StringControl,
		options: SelectOptionWithEventsControl,
		onEvent: eventHandlerControl(SelectOptionEventOptions),
		};

		const getBaseValue: ColumnTypeViewFn<typeof childrenMap, string, string> = (props) => props.text;
Expand All		@@ -125,6 +126,7 @@ type SelectEditProps = {
		onChange: (value: string) => void;
		onChangeEnd: () => void;
		options: any[];
		onMainEvent?: (eventName: string) => void;
		};

		const SelectEdit = React.memo((props: SelectEditProps) => {
Expand All		@@ -150,7 +152,12 @@ const SelectEdit = React.memo((props: SelectEditProps) => {
		if (selectedOption && selectedOption.onEvent) {
		selectedOption.onEvent("click");
		}
		}, [props.onChange, props.options]);

		// Also trigger the main component's event handler
		if (props.onMainEvent) {
		props.onMainEvent("click");
		}
		}, [props.onChange, props.options, props.onMainEvent]);

		const handleEvent = useCallback(async (eventName: string) => {
		if (!mountedRef.current) return [] as unknown[];
Expand DownExpand Up		@@ -203,6 +210,7 @@ export const ColumnSelectComp = (function () {
		options={props.otherProps?.options \|\| []}
		onChange={props.onChange}
		onChangeEnd={props.onChangeEnd}
		onMainEvent={props.otherProps?.onEvent}
		/>
		</Wrapper>
		)
Expand All		@@ -217,6 +225,7 @@ export const ColumnSelectComp = (function () {
		{children.options.propertyView({
		title: trans("optionsControl.optionList"),
		})}
		{children.onEvent.propertyView()}
		</>
		);
		})
Expand Down