Skip to content
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.

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

`<b-table>` row-hovered event handler throws error when table removed while hovered #4384

Closed
jpicton opened this issue Nov 14, 2019 · 8 comments · Fixed by #4388 or mariazevedo88/hash-generator-js#24 · May be fixed by tghelere/CL#8
Closed
Labels

Comments

@jpicton
Copy link

@jpicton jpicton commented Nov 14, 2019

Describe the bug

Since upgrading from v2.0.0-rc.28 to v2.1.0 I've been noticing the following error appearing in the browser console from time to time:

[Vue warn]: Error in v-on handler: "TypeError: this.$refs.tbody is undefined"

found in

---> <BTr>
       <BTbody>
         <BTable>
            // ...
              <Root> vue.runtime.esm.js:619

TypeError: "this.$refs.tbody is undefined"
    getTbodyTrs mixin-tbody.js:32
    getTbodyTrIndex mixin-tbody.js:54
    emitTbodyRowEvent mixin-tbody.js:59
    rowHovered mixin-tbody-row.js:90
    VueJS 3
vue.runtime.esm.js:1888

This appears to be the offending line: https://github.com/bootstrap-vue/bootstrap-vue/blob/v2.1.0/src/components/table/helpers/mixin-tbody.js#L27

Steps to reproduce the bug

What I believe is happening is that a row-hovered (or row-unhovered) event is triggered as a user passes his cursor over a <b-table> component. Then, before the event has been fully handled, the user triggers another action that removes the tbody from the DOM (in our case we noticed the problem when moving the cursor up over a table to click a navigation button that triggers routing).

I've been able to - somewhat - consistently reproduce this bug by performing the actions described above (the hover and then route must be done in quick succession obviously).

Expected behavior

I don't expect to be seeing console errors or warnings in this case. I just expect the handler to stop gracefully. I'm not sure what the best solution is for this one. Maybe check for the existence of tbody and just bail out if it is undefined?

@tmorehouse

This comment has been minimized.

Copy link
Member

@tmorehouse tmorehouse commented Nov 14, 2019

Could you provide a minimal jsfiddle/codepen sample that reproduces the error?

I tried a quick test and couldn't reproduce the error. Are you using <tbody> transitions?

@jpicton

This comment has been minimized.

Copy link
Author

@jpicton jpicton commented Nov 14, 2019

No we aren't using <tbody> transitions, but we do have a component that wraps the <b-table> that transitions when routing (i.e. replaces <b-table> with a spinner until new route is loaded).

I'll create a codepen when I get a chance to show what I'm talking about. But if I'm right about the cause, reproduction might be a little tricky because it's contingent on the timing of the row hover/unhover and the action that removes the table from the DOM.

tmorehouse added a commit that referenced this issue Nov 14, 2019
…le is removed from dom (fixes #4384)
@tmorehouse tmorehouse changed the title <b-table> row-hovered event handler throws error `<b-table>` row-hovered event handler throws error with table removed Nov 14, 2019
@tmorehouse

This comment has been minimized.

Copy link
Member

@tmorehouse tmorehouse commented Nov 14, 2019

I've added in some checks in the event handler which should fix this edge case issue

@tmorehouse

This comment has been minimized.

Copy link
Member

@tmorehouse tmorehouse commented Nov 14, 2019

Will also add in code to instantiate the event listeners only if there are event listeners registered

@tmorehouse tmorehouse changed the title `<b-table>` row-hovered event handler throws error with table removed `<b-table>` row-hovered event handler throws error when table removed while hovered Nov 14, 2019
jackmu95 added a commit that referenced this issue Nov 15, 2019
…le is removed from dom. instantiate row event handlers only when listeners are registered (fixes #4384) (#4388)

* fix(b-table, b-table-lite): handle edge case with row events when table is removed from dom (fixes #4384)

* Update mixin-tbody.js

* Update mixin-tbody-row.js

* Update table-tbody-row-events.spec.js

* Update table-tbody-row-events.spec.js

* Update mixin-tbody-row.js

* only emit events if listeners are registered

* Update table-tbody-row-events.spec.js

* Update mixin-tbody-row.js

* Update mixin-tbody.js

* Update mixin-tbody.js

* Update mixin-tbody-row.js

* Update mixin-tbody.js
@adholland

This comment has been minimized.

Copy link

@adholland adholland commented Dec 31, 2019

Hi @jackmu95 ,

I believe I'm seeing a similar issue in IE 11 : -
TypeError: Object expected
{
[functions]: ,
proto: {
[functions]: ,
proto: { },
message: "",
name: "TypeError",
Symbol()_9.chjv4vn7h5d: undefined
},
description: "Object expected",
message: "Object expected",
name: "TypeError",
number: -2146823281,
stack: "TypeError: Object expected
at Ng.methods.getTbodyTrs (http://localhost:8080/filemanager-ui/js/fileManager.js:23:343446)
at Ng.methods.getTbodyTrIndex (http://localhost:8080/filemanager-ui/js/fileManager.js:23:343593)
at Ng.methods.emitTbodyRowEvent (http://localhost:8080/filemanager-ui/js/fileManager.js:23:343687)
at $g.methods.rowUnhovered (http://localhost:8080/filemanager-ui/js/fileManager.js:23:339382)
at ne (http://localhost:8080/filemanager-ui/js/fileManager.js:7:11658)
at n (http://localhost:8080/filemanager-ui/js/fileManager.js:7:13477)
at o._wrapper (http://localhost:8080/filemanager-ui/js/fileManager.js:7:51761)",
Symbol()_9.chjv4vn7h5d: undefined
}

Do you know when this fix will be available or if there is a workaround ?

Thanks
Ashley.

@Snack-X

This comment has been minimized.

Copy link

@Snack-X Snack-X commented Jan 6, 2020

When will this get fixed? We are constantly getting this error(more than a thousand event logged in Sentry), but v2.2.0 does not look like to be released any time soon.

I think this kind of bug fixes should be updated in semver patch level(i.e., v2.1.1).

@tmorehouse

This comment has been minimized.

Copy link
Member

@tmorehouse tmorehouse commented Jan 9, 2020

BootstrapVue v2.2.0 has been released.

@adholland

This comment has been minimized.

Copy link

@adholland adholland commented Jan 21, 2020

@tmorehouse @jackmu95 I've tried with version 2.2.0 and there is still an issue.

It is far far better - it no longer generates thousands of errors while hovering, however as soon as you click or double click a row you then see the issue manifest itself - though with a single error.

TypeError: Object expected
{
[functions]: ,
proto: { },
description: "Object expected",
message: "Object expected",
name: "TypeError",
number: -2146823281,
stack: "TypeError: Object expected
at Gy.methods.getTbodyTrs (http://localhost:5000/js/fileManager-legacy.js:23:360432)
at Gy.methods.getTbodyTrIndex (http://localhost:5000/js/fileManager-legacy.js:23:360632)
at Gy.methods.emitTbodyRowEvent (http://localhost:5000/js/fileManager-legacy.js:23:360747)
at Gy.methods.onTBodyRowClicked (http://localhost:5000/js/fileManager-legacy.js:23:361573)
at ne (http://localhost:5000/js/fileManager-legacy.js:7:11658)
at n (http://localhost:5000/js/fileManager-legacy.js:7:13477)
at o._wrapper (http://localhost:5000/js/fileManager-legacy.js:7:51753)",
Symbol()_9.of693fu6u31: undefined
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.