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, mariazevedo88/hash-generator-js#14, mariazevedo88/hash-generator-js#15 or tghelere/CL#8 · May be fixed by bermudez/mynuxtjs#1

Comments

@janswist
Copy link

@janswist janswist 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.

@jacobmllr95
Copy link
Member

@jacobmllr95 jacobmllr95 commented Sep 30, 2019

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

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse 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
Copy link
Author

@janswist janswist commented Sep 30, 2019

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

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Sep 30, 2019

In the future ;-)

@janswist
Copy link
Author

@janswist janswist commented Sep 30, 2019

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

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Sep 30, 2019

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

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse 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
Copy link
Author

@janswist janswist commented Sep 30, 2019

Good catch! Will do that - thank you

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse 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