Skip to content

Commit 428b59a

Browse files
fix click event trigger on tabl's tag column
1 parent 6dbae39 commit 428b59a

File tree

2 files changed

+21
-5
lines changed

2 files changed

+21
-5
lines changed

client/packages/lowcoder/src/components/table/EditableCell.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -225,6 +225,7 @@ function EditableCellComp<T extends JSONValue>(props: EditableCellProps<T>) {
225225
key={`normal-view-${cellIndex}`}
226226
tabIndex={editable ? 0 : -1 }
227227
onFocus={enterEditFn}
228+
style={{ width: '100%', height: '100%'}}
228229
>
229230
{normalView}
230231
</div>

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnTagsComp.tsx

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -399,7 +399,8 @@ export const ColumnTagsComp = (function () {
399399
value = typeof value === "string" && value.split(",")[1] ? value.split(",") : value;
400400
const tags = _.isArray(value) ? value : (value.length ? [value] : []);
401401

402-
const handleTagClick = (tagText: string) => {
402+
const handleTagClick = (e: React.MouseEvent, tagText: string) => {
403+
e.stopPropagation();
403404
const foundOption = tagOptions.find(option => option.label === tagText);
404405
if (foundOption && foundOption.onEvent) {
405406
foundOption.onEvent("click");
@@ -409,6 +410,13 @@ export const ColumnTagsComp = (function () {
409410
props.onEvent("click");
410411
}
411412
};
413+
414+
const handleTagWrapperClick = (e: React.MouseEvent) => {
415+
e.stopPropagation();
416+
if (props.onEvent) {
417+
props.onEvent("click");
418+
}
419+
};
412420

413421
const view = tags.map((tag, index) => {
414422
// The actual eval value is of type number or boolean
@@ -418,20 +426,27 @@ export const ColumnTagsComp = (function () {
418426
const tagStyle = getTagStyle(tagText, tagOptions);
419427

420428
return (
421-
<div key={`${tag.split(' ').join('_')}-${index}`}>
429+
<React.Fragment key={`${tag.split(' ').join('_')}-${index}`}>
422430
<TagStyled
423431
color={tagColor}
424432
icon={tagIcon}
425433
key={index}
426434
style={tagStyle}
427-
onClick={() => handleTagClick(tagText)}
435+
onClick={(e) => handleTagClick(e, tagText)}
428436
>
429437
{tagText}
430438
</TagStyled>
431-
</div>
439+
</React.Fragment>
432440
);
433441
});
434-
return view;
442+
return (
443+
<div
444+
style={{ width: '100%', height: '100%', minHeight: '22px'}}
445+
onClick={handleTagWrapperClick}
446+
>
447+
{view}
448+
</div>
449+
);
435450
},
436451
(nodeValue) => {
437452
const text = nodeValue.text.value;

0 commit comments

Comments
 (0)