🐛 [Bug]: [Grid]组件单元格编辑时，单元格类型为 Select 的编辑项无法直接选中第一个值，不触发任何事件，需要选中其他值后再重新选回来才能生效

smallseapig commented 4 months ago

Version

3.12.1

Vue Version

latest

Link to minimal reproduction

官方演练场：https://opentiny.design/vue-playground?cmpId=grid-edit&fileName=edit/editing.vue&apiMode=Options&mode=pc&theme=default

<template>
  <div>
    <h4 class="title">单元格编辑：</h4>
    <tiny-grid :data="tableData" seq-serial :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
      <tiny-grid-column type="index" width="60"></tiny-grid-column>
      <tiny-grid-column
        field="name"
        title="名称"
        show-icon
        :editor="{ component: 'input', autoselect: true }"
      ></tiny-grid-column>
      <tiny-grid-column field="area" title="区域" :editor="{ component: 'select', options }"></tiny-grid-column>
      <tiny-grid-column
        field="address"
        title="地址"
        :editor="{ component: 'input', autoselect: true }"
      ></tiny-grid-column>
      <tiny-grid-column
        field="introduction"
        title="公司简介"
        :editor="{ component: 'input', autoselect: true }"
        show-overflow="ellipsis"
      ></tiny-grid-column>
    </tiny-grid>
    <h4 class="title">行编辑：</h4>
    <tiny-grid :data="tableData" seq-serial :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }">
      <tiny-grid-column type="index" width="60"></tiny-grid-column>
      <tiny-grid-column
        field="name"
        title="名称"
        :show-icon="false"
        :editor="{ component: 'input', autoselect: true }"
      ></tiny-grid-column>
      <tiny-grid-column
        field="area"
        title="区域"
        :show-icon="false"
        :editor="{ component: 'select', options }"
      ></tiny-grid-column>
      <tiny-grid-column
        field="address"
        title="地址"
        :show-icon="false"
        :editor="{ component: 'input', autoselect: true }"
      ></tiny-grid-column>
      <tiny-grid-column
        field="introduction"
        title="公司简介"
        :show-icon="false"
        :editor="{ component: 'input', autoselect: true }"
        show-overflow="ellipsis"
      ></tiny-grid-column>
    </tiny-grid>
  </div>
</template>

<script>
import { Grid, GridColumn } from '@opentiny/vue'

export default {
  components: {
    TinyGrid: Grid,
    TinyGridColumn: GridColumn
  },
  data() {
    return {
      options: [
        { label: '华北区', value: '华北区' },
        { label: '华东区', value: '华东区' },
        { label: '华南区', value: '华南区' }
      ],
      tableData: [
        {
          id: '1',
          name: 'GFD科技YX公司',
          area: '',
          address: '福州',
          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
        },
        {
          id: '2',
          name: 'WWWW科技YX公司',
          area: '',
          address: '深圳福田区',
          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
        },
        {
          id: '3',
          name: 'RFV有限责任公司',
          area: '华南区',
          address: '中山市',
          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
        }
      ]
    }
  }
}
</script>

<style scoped>
.title {
  font-size: 16px;
  padding: 15px;
  font-weight: bolder;
  color: #444;
}
</style>

Step to reproduce

Grid 组件单元格编辑，单元格类型为设置为 Select
对应 Select 的 options 初始化设置为空
运行后，无法直接选中 Select 的第一项，需要先选择其他后再选回第一项

What is expected

选中 Select 第一项时，直接生效

What is actually happening

选中 Select 第一项时，无法生效，并不触发相关事件

What is your project name

Grid组件

Any additional comments (optional)

No response

Issues-translate-bot commented 4 months ago

Bot detected the issue body's language is not English, translate it automatically.

Title: 🐛 [Bug]: When editing the [Grid] component cell, the edit item with the cell type Select cannot directly select the first value and does not trigger any events. You need to select other values and then select again. It won't take effect until you come back

gimmyhehe commented 4 months ago

演练场复现了bug，问题已收录，待定位问题与修复~