question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug Report][2.6.6] V-Checkbox does not emit blur and focus events

See original GitHub issue

Environment

Vuetify Version: 2.6.6 Vue Version: 2.6.14 Browsers: Chrome 101.0.4951.54 OS: Mac OS 10.15.7

Steps to reproduce

  1. Add a v-checkbox to a template
  2. Bind focus and/or blur listeners (@focus / @blur)
  3. Click checkbox
  4. Click outside checkbox

Expected Behavior

After 3., focus handler is triggered After 4. blur handler is triggered

Actual Behavior

After 3., focus handler is not triggered After 4. blur handler is not triggered

Reproduction Link

https://codepen.io/GuillaumeMeral/pen/xxpRXzN

Other comments

I already submitted this error here https://github.com/vuetifyjs/vuetify/issues/14862, but the PR proposed by @KaelWD did not seem to fix the issue. The v-checkbox still does not trigger focus and blur handlers like a native input with type="checkbox" would.

Sorry to seem persistent but the example in the reproduction link still behave the same as it did when i initially reported this. I also double checked that it loads the correct version of vuetify : https://unpkg.com/vuetify@2.6.6/dist/vuetify.js

If i missed something please tell me because this is becoming the source of multiple issues in my own project.

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
gmeralcommented, Jun 10, 2022

Ok thanks for the quick answers ! If anyone stumbles upon this i manually emit focus and blur on click and click-outside as a workaround :

<v-checkbox
  @click="$emit('focus')"
  v-click-outside="$emit('blur')"
/>
0reactions
KaelWDcommented, Oct 19, 2022

This works on click in v3

Read more comments on GitHub >

github_iconTop Results From Across the Web

Element: blur event - Web APIs | MDN
The blur event fires when an element has lost focus. The event does not bubble, but the related focusout event that follows does...
Read more >
Checkbox onBlur event doesn't fire when clicked with mouse
Bug 13724 - Checkbox onBlur event doesn't fire when clicked with mouse ... input elements do not gain focus on click, hence, there...
Read more >
Blur event for custom vue component - Stack Overflow
Something like this? Answer: You need to set tabindex="0" to make it focusable. Here an custom dropdown how you could do it:.
Read more >
Changelog - Cypress Documentation
Fixed a regression introduced in the Electron browser in Cypress 10.8.0 where the CYPRESS_EVERY_NTH_FRAME environment variable was not being set appropriately ...
Read more >
Open and Resolved Bugs for the Latest Webex Meetings ...
Webex Support, Webex Training, Webex Events (Classic), Webex Site ... When an update does not include customer-found bugs, there will not be ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found