opentiny
🐛 [Bug]: [Grid]组件单元格编辑时，单元格类型为 Select 的编辑项无法直接选中第一个值，不触发任何事件，需要选中其他值后再重新选回来才能生效
Version
3.12.1
Vue Version
latest
Link to minimal reproduction
<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
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
Bot detected the issue body's language is not English, translate it automatically.
A bug has reappeared in the training ground, the problem has been included, and the problem is to be located and repaired~
Bot detected the issue body's language is not English, translate it automatically.
@smallseapig Fixed in version 3.21.0