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-tooltip] Expected HTMLElement, got SVGSVGElement error #4173

Closed
janswist opened this issue Sep 30, 2019 · 9 comments · Fixed by #4174 or mariazevedo88/hash-generator-js#14 · May be fixed by bermudez/mynuxtjs#1

Comments

@janswist
Copy link

commented Sep 30, 2019

Describe the bug

[Vue warn]: Invalid prop: type check failed for prop "target". Expected HTMLElement, got SVGSVGElement

Steps to reproduce the bug

font-awesome-icon.align-self-center(
  id="copyReflink"
  :icon="copyIcon"
  style="cursor: pointer; color: #42bff4; font-size: 16px"
  @click="copyLinkToClipboard"
)
b-tooltip(target="copyReflink" placement="top" @hidden="reflinkClicked ? reflinkClicked = false : ''") Copy

Expected behavior

Error shouldn't happen.

Versions

Libraries:

  • BootstrapVue: 2.0.2
  • Bootstrap: 4.3.1
  • Vue: 3.1.1

Environment:

  • Device: MacBook Pro
  • OS: HighSierra
  • Browser: Chrome
  • Version: 76.0.3809.132

Additional context

Didn't happen before. I just updated to vue-cli 3 and got this.

@jackmu95 jackmu95 self-assigned this Sep 30, 2019
@jackmu95

This comment has been minimized.

Copy link
Member

commented Sep 30, 2019

@tmorehouse Maybe we should make the check more general and check for Element which bot HTMLElement and SVGSVGElement inherit.

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Sep 30, 2019

Element might be a bit too generic (as it includes things that wouldn't work with the trigger event listeners).

We can add in SVGElement which would cover this case.

@janswist

This comment has been minimized.

Copy link
Author

commented Sep 30, 2019

You guys are fast! When it will be available in production?

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Sep 30, 2019

In the future ;-)

@janswist

This comment has been minimized.

Copy link
Author

commented Sep 30, 2019

Oh, okay :) FIrst time posting issue so just not sure what happens next. Cheers!

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Sep 30, 2019

Should be available in v2.0.3 coming later this week.

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Sep 30, 2019

Note when applying tooltips/popovers to non-interactive elements, make sure you add tabindex="0" attribute so that keyboard-only users and screen reader users can access the element (and the tooltip/popover)

@janswist

This comment has been minimized.

Copy link
Author

commented Sep 30, 2019

Good catch! Will do that - thank you

@jackmu95 jackmu95 removed their assignment Sep 30, 2019
@jackmu95 jackmu95 added the Type: Bug label Sep 30, 2019
tmorehouse added a commit that referenced this issue Sep 30, 2019
…loses #4173) (#4174)
@tmorehouse

This comment has been minimized.

Copy link
Member

commented Oct 6, 2019

BootstrapVue v2.0.3 has been released

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