fix: select组件table选择模式下无法点选问题 (#4477)

__tests__/event-action/drawer.test.tsx

@@ -214,4 +214,4 @@ test('EventAction:drawer', async () => {
     expect(container.querySelector('[role="dialog"]')).not.toBeInTheDocument();
   });
   expect(container).toMatchSnapshot();
-});
+}, 7000);

__tests__/renderers/Form/__snapshots__/select.test.tsx.snap

@@ -959,11 +959,40 @@ exports[`Renderer:select table with labelField & valueField 1`] = `
               style="position: relative;"
               tabindex="-1"
             >
-              <span
-                class="cxd-ResultBox-placeholder"
+              <div
+                class="cxd-ResultBox-value"
               >
-                请选择
-              </span>
+                <span
+                  class="cxd-ResultBox-valueLabel"
+                >
+                  诸葛亮
+                </span>
+                <a
+                  data-index="0"
+                >
+                  <icon-mock
+                    classname="icon icon-close"
+                    icon="close"
+                  />
+                </a>
+              </div>
+              <div
+                class="cxd-ResultBox-value"
+              >
+                <span
+                  class="cxd-ResultBox-valueLabel"
+                >
+                  李白
+                </span>
+                <a
+                  data-index="1"
+                >
+                  <icon-mock
+                    classname="icon icon-close"
+                    icon="close"
+                  />
+                </a>
+              </div>
               <span
                 class="cxd-TransferDropDown-icon"
               >
@@ -1038,7 +1067,7 @@ exports[`Renderer:select table with labelField & valueField 1`] = `
                             class="cxd-Table-checkCell"
                           >
                             <label
-                              class="cxd-Checkbox cxd-Checkbox--checkbox cxd-Checkbox--full cxd-Checkbox--sm"
+                              class="cxd-Checkbox cxd-Checkbox--checkbox cxd-Checkbox--sm"
                             >
                               <input
                                 type="checkbox"
@@ -1059,7 +1088,7 @@ exports[`Renderer:select table with labelField & valueField 1`] = `
                       </thead>
                       <tbody>
                         <tr
-                          class=""
+                          class="is-active"
                         >
                           <td
                             class="cxd-Table-checkCell"
@@ -1146,7 +1175,7 @@ exports[`Renderer:select table with labelField & valueField 1`] = `
                           </td>
                         </tr>
                         <tr
-                          class=""
+                          class="is-active"
                         >
                           <td
                             class="cxd-Table-checkCell"
@@ -1340,7 +1369,11 @@ exports[`Renderer:select table with labelField & valueField 1`] = `
 </div>
 `;
 
-exports[`Renderer:select table with labelField & valueField 2`] = `Object {}`;
+exports[`Renderer:select table with labelField & valueField 2`] = `
+Object {
+  "a": "zhugeliang,libai",
+}
+`;
 
 exports[`Renderer:select tree 1`] = `
 <div>

scss/components/form/_selection.scss

@@ -46,7 +46,6 @@
   user-select: none;
   padding: var(--gap-xs) 0;
 
-
   &-group > &-itemLabel {
     padding: var(--gap-xs) var(--gap-base);
     color: var(--FileControl-icon-color);
@@ -78,10 +77,10 @@
 
     &:hover {
       background: var(--Tree-item-onHover-bg);
-      
-        i {
-          border: 1px solid var(--menu-active-color);
-        }
+
+      i {
+        border: 1px solid var(--menu-active-color);
+      }
     }
 
     &.is-disabled {
@@ -117,6 +116,10 @@
     border-top: var(--Table-borderWidth) solid var(--Table-borderColor);
   }
 
+  .#{$ns}Table-table > tbody > tr {
+    cursor: pointer;
+  }
+
   .#{$ns}Table-table > thead > tr > th,
   .#{$ns}Table-table > tbody > tr > td {
     font-size: var(--fontSizeSm);
@@ -347,4 +350,4 @@
     float: right;
     cursor: pointer;
   }
-}
+}

scss/themes/cxd.scss

@@ -124,8 +124,6 @@
   }
 }
 
-
-
 .#{$ns}Toast {
   .#{$ns}Toast-icon {
     margin-right: #{px2rem(8px)};

src/components/ResultTableList.tsx

@@ -43,7 +43,10 @@ export interface ResultTableSelectionState {
   searchTableOptions: Options;
 }
 
-export class BaseResultTableSelection extends BaseSelection<ResultTableSelectionProps, ResultTableSelectionState> {
+export class BaseResultTableSelection extends BaseSelection<
+  ResultTableSelectionProps,
+  ResultTableSelectionState
+> {
   static defaultProps = {
     ...BaseSelection.defaultProps,
     cellRender: (
@@ -55,25 +58,21 @@ export class BaseResultTableSelection extends BaseSelection<ResultTableSelection
       option: Option,
       colIndex: number,
       rowIndex: number
-    ) => <span>{resolveVariable(column.name, option)}</span>,
+    ) => <span>{resolveVariable(column.name, option)}</span>
   };
 
   state: ResultTableSelectionState = {
     tableOptions: [],
     searching: false,
     searchTableOptions: []
-  }
+  };
 
   static getDerivedStateFromProps(props: ResultTableSelectionProps) {
-    const {
-      options,
-      value,
-      option2value,
-    } = props;
+    const {options, value, option2value} = props;
     const valueArray = BaseSelection.value2array(value, options, option2value);
     return {
       tableOptions: valueArray
-    }
+    };
   }
 
   @autobind
@@ -117,15 +116,16 @@ export class BaseResultTableSelection extends BaseSelection<ResultTableSelection
     }
 
     const {value, onSearch} = this.props;
-    const searchOptions = ((value || []) as Options)
-      .filter(item => onSearch?.(inputValue, item));
+    const searchOptions = ((value || []) as Options).filter(item =>
+      onSearch?.(inputValue, item)
+    );
 
     this.setState({
       searching: true,
       searchTableOptions: searchOptions
     });
   }
-  
+
   @autobind
   clearSearch() {
     this.setState({
@@ -152,9 +152,7 @@ export class BaseResultTableSelection extends BaseSelection<ResultTableSelection
 
     return (
       <div className={cx('ResultTableList', className)}>
-        {
-          Array.isArray(value) && value.length ?
-          (
+        {Array.isArray(value) && value.length ? (
           <TableSelection
             columns={columns}
             options={!searching ? tableOptions : searchTableOptions}
@@ -163,6 +161,7 @@ export class BaseResultTableSelection extends BaseSelection<ResultTableSelection
             option2value={option2value}
             onChange={onChange}
             multiple={false}
+            resultMode={true}
             cellRender={(
               column: {
                 name: string;
@@ -176,27 +175,28 @@ export class BaseResultTableSelection extends BaseSelection<ResultTableSelection
               const raw = cellRender(column, option, colIndex, rowIndex);
               if (colIndex === columns.length - 1) {
                 return (
-                <>
-                  {raw}
-                  {
-                    <span
-                      className={cx('ResultTableList-close-btn')}
-                      onClick={(e: React.SyntheticEvent<HTMLElement>) => {
-                        e.stopPropagation();
-                        this.handleCloseItem(option);
-                      }}
-                    >
-                      <CloseIcon />
-                    </span>
-                  }
-                </>)
+                  <>
+                    {raw}
+                    {
+                      <span
+                        className={cx('ResultTableList-close-btn')}
+                        onClick={(e: React.SyntheticEvent<HTMLElement>) => {
+                          e.stopPropagation();
+                          this.handleCloseItem(option);
+                        }}
+                      >
+                        <CloseIcon />
+                      </span>
+                    }
+                  </>
+                );
               }
               return raw;
             }}
           />
-          )
-          : (<div className={cx('Selections-placeholder')}>{__(placeholder)}</div>)
-        }
+        ) : (
+          <div className={cx('Selections-placeholder')}>{__(placeholder)}</div>
+        )}
       </div>
     );
   }
@@ -211,7 +211,6 @@ export class BaseResultTableSelection extends BaseSelection<ResultTableSelection
       placeholder = __('Transfer.searchKeyword')
     } = this.props;
 
-
     return (
       <div className={cx('Selections', className)}>
         {title ? <div className={cx('Selections-title')}>{title}</div> : null}

src/components/TableSelection.tsx

@@ -5,9 +5,12 @@ import {uncontrollable} from 'uncontrollable';
 import Checkbox from './Checkbox';
 import {Option} from './Select';
 import {resolveVariable} from '../utils/tpl-builtin';
+import {noop} from '../utils/helper';
 import {localeable} from '../locale';
 
 export interface TableSelectionProps extends BaseSelectionProps {
+  /** 是否为结果渲染列表 */
+  resultMode?: boolean;
   columns: Array<{
     name: string;
     label: string;
@@ -108,7 +111,8 @@ export class TableSelection extends BaseSelection<TableSelectionProps> {
       multiple,
       option2value,
       translate: __,
-      itemClassName
+      itemClassName,
+      resultMode
     } = this.props;
     const columns = this.getColumns();
     let valueArray = BaseSelection.value2array(value, options, option2value);
@@ -122,6 +126,12 @@ export class TableSelection extends BaseSelection<TableSelectionProps> {
             return (
               <tr
                 key={rowIndex}
+                /** 被ResultTableList引用，如果设置click事件，会导致错误删除结果列表的内容，先加一个开关判断 */
+                onClick={
+                  resultMode
+                    ? noop
+                    : e => e.defaultPrevented || this.toggleOption(option)
+                }
                 className={cx(
                   itemClassName,
                   option.className,
@@ -130,18 +140,15 @@ export class TableSelection extends BaseSelection<TableSelectionProps> {
                 )}
               >
                 {multiple ? (
-                  <td className={cx('Table-checkCell')}
+                  <td
+                    className={cx('Table-checkCell')}
                     key="checkbox"
                     onClick={e => {
                       e.stopPropagation();
                       this.toggleOption(option);
                     }}
                   >
-                    <Checkbox
-                      size="sm"
-                      checked={checked}
-                      disabled={disabled}
-                    />
+                    <Checkbox size="sm" checked={checked} disabled={disabled} />
                   </td>
                 ) : null}
                 {columns.map((column, colIndex) => (
@@ -183,4 +190,4 @@ export default themeable(
       value: 'onChange'
     })
   )
-);
+);