🌐 AI搜索 & 代理 主页
Skip to content

fix(b-table, b-table-lite, b-tbody): fix delegated event handlers when transition + minor adjustment to row key generation (fixes #4370, #4360) #4372

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tmorehouse merged 6 commits into from
Nov 11, 2019
Merged

fix(b-table, b-table-lite, b-tbody): fix delegated event handlers when transition + minor adjustment to row key generation (fixes #4370, #4360) #4372

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
971ee01
chore(b-table, b-table-lite): minor adjustment to row `key` generation
tmorehouse Nov 11, 2019
963808a
Update mixin-tbody-row.js
tmorehouse Nov 11, 2019
59dfd65
Update tbody.js
tmorehouse Nov 11, 2019
002b7ae
Update tbody.js
tmorehouse Nov 11, 2019
ea03469
Update mixin-tbody.js
tmorehouse Nov 11, 2019
d85380b
Update mixin-tbody.js
jacobmllr95 Nov 11, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 4 additions & 5 deletions src/components/table/helpers/mixin-tbody-row.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,12 +205,12 @@ export default {
// rows index within the tbody.
// See: https://github.com/bootstrap-vue/bootstrap-vue/issues/2410
const primaryKey = this.primaryKey
const hasPkValue = primaryKey && !isUndefinedOrNull(item[primaryKey])
const rowKey = hasPkValue ? toString(item[primaryKey]) : String(rowIndex)
const primaryKeyValue = toString(get(item, primaryKey)) || null
const rowKey = primaryKeyValue || String(rowIndex)

// If primary key is provided, use it to generate a unique ID on each tbody > tr
// In the format of '{tableId}__row_{primaryKeyValue}'
const rowId = hasPkValue ? this.safeId(`_row_${item[primaryKey]}`) : null
const rowId = primaryKeyValue ? this.safeId(`_row_${primaryKeyValue}`) : null

// Selectable classes and attributes
const selectableClasses = this.selectableRowClasses ? this.selectableRowClasses(rowIndex) : {}
Expand All @@ -233,8 +233,7 @@ export default {
attrs: {
id: rowId,
tabindex: hasRowClickHandler ? '0' : null,
'data-pk': rowId ? String(item[primaryKey]) : null,
// Should this be `aria-details` instead?
'data-pk': primaryKeyValue || null,
'aria-details': detailsId,
'aria-owns': detailsId,
'aria-rowindex': ariaRowIndex,
Expand Down
7 changes: 5 additions & 2 deletions src/components/table/helpers/mixin-tbody.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import KeyCodes from '../../../utils/key-codes'
import { arrayIncludes } from '../../../utils/array'
import { arrayIncludes, from as arrayFrom } from '../../../utils/array'
import { closest, isElement } from '../../../utils/dom'
import { props as tbodyProps, BTbody } from '../tbody'
import filterEvent from './filter-event'
Expand All @@ -23,11 +23,14 @@ export default {
// Returns all the item TR elements (excludes detail and spacer rows)
// `this.$refs.itemRows` is an array of item TR components/elements
// Rows should all be B-TR components, but we map to TR elements
// Also note that `this.$refs.itemRows` may not always be in document order
const tbody = this.$refs.tbody.$el || this.$refs.tbody
const trs = (this.$refs.itemRows || []).map(tr => tr.$el || tr)
// TODO: This may take time for tables many rows, so we may want to cache
// the result of this during each render cycle on a non-reactive
// property. We clear out the cache as each render starts, and
// populate it on first access of this method if null
return (this.$refs.itemRows || []).map(tr => tr.$el || tr)
return arrayFrom(tbody.children).filter(tr => arrayIncludes(trs, tr))
},
getTbodyTrIndex(el) {
// Returns index of a particular TBODY item TR
Expand Down
24 changes: 14 additions & 10 deletions src/components/table/tbody.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,21 +71,25 @@ export const BTbody = /*#__PURE__*/ Vue.extend({
},
tbodyProps() {
return this.tbodyTransitionProps ? { ...this.tbodyTransitionProps, tag: 'tbody' } : {}
},
tbodyListeners() {
const handlers = this.tbodyTransitionHandlers || {}
return { ...this.$listeners, ...handlers }
}
},
render(h) {
const data = {
props: this.tbodyProps,
attrs: this.tbodyAttrs
}
if (this.isTransitionGroup) {
// We use native listeners if a transition group
// for any delegated events
data.on = this.tbodyTransitionHandlers || {}
data.nativeOn = this.$listeners || {}
} else {
// Otherwise we place any listeners on the tbody element
data.on = this.$listeners || {}
}
return h(
this.isTransitionGroup ? 'transition-group' : 'tbody',
{
props: this.tbodyProps,
attrs: this.tbodyAttrs,
// Pass down any listeners
on: this.tbodyListeners
},
data,
this.normalizeSlot('default', {})
)
}
Expand Down