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

cv-tabs fails in focusout event when using router-link in a tab #1083

Closed
Fontinalis opened this issue Nov 26, 2020 · 1 comment · Fixed by #1084
Closed

cv-tabs fails in focusout event when using router-link in a tab #1083

Fontinalis opened this issue Nov 26, 2020 · 1 comment · Fixed by #1084

Comments

@Fontinalis
Copy link
Contributor

Fontinalis commented Nov 26, 2020

Detailed description

Describe in detail the issue you're having.

We use NuxtJS in one of our projects and have @carbon/vue for UI elements. On one of our "detailed view", we use the cv-tabs and cv-tab components and we have a router-link in one of the tabs. The issue we are experiencing is that after clicking on the router-link in a cv-tab, the cv-tabs component's focusout event listener gets called and uses the trigger reference as a parameter in a window.getComputedStyle function call, which raises the following error:

client.js?06a0:96 TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
    at VueComponent.onFocusout (cv-tabs.vue?e464:125)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at HTMLDivElement.invoker (vue.runtime.esm.js?2b0e:2179)
    at HTMLDivElement.original._wrapper (vue.runtime.esm.js?2b0e:6917)
    at Object.removeChild (vue.runtime.esm.js?2b0e:5713)
    at removeNode (vue.runtime.esm.js?2b0e:5884)
    at remove$$1 (vue.runtime.esm.js?2b0e:5873)
    at eval (vue.runtime.esm.js?2b0e:7695)
    at eval (vue.runtime.esm.js?2b0e:336)
    at whenTransitionEnds (vue.runtime.esm.js?2b0e:7391)

Is this issue related to a specific component?

Yes, this is related to the cv-tabs component.

What did you expect to happen? What happened instead? What would you like to see changed?

I would expect to navigate to the page with the router-link without an error, but the next page fails to load because of this issue.

What browser are you working in?

Google Chrome 87.0.4280.67

What version of the Carbon Design System are you using?

I'm experiencing the issue in the latest v1.35.0 version too. Based on the commit history and my own experience, this bug is in there since multiple versions.

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

My project has a strict deadline, so this issue is a high priority for me and my team, I'm creating a PR really soon which I hope you can review and merge if you find it correct.

@Fontinalis
Copy link
Contributor Author

Fontinalis commented Nov 26, 2020

This might be on our end, because we wrap tabs, tags and a few other ones into one component, so I'm looking into it.

UPDATE:
No, turns out it's not that. I can reproduce the issue with the following:

<cv-tabs>
   <cv-tab
      id="tab-1"
      label="Test tab"
      :selected="selected"
      >
        <router-link to="/some/other/page">
         example link
      </router-link>
   </cv-tab>
</cv-tabs>

lee-chase added a commit that referenced this issue Dec 11, 2020
…1084)

* fix #1083: cv-tabs fails in focusout event when using router-link in a tab

* fix #1083: fix build errors

Co-authored-by: Lee Chase <leechase@live.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant