fix: restore focus-ring when closing on click #4341
Conversation
| this._overlayContent.addEventListener('focusin', () => { | ||
| this._setFocused(true); | ||
| if (this._keyboardActive) { |
There was a problem hiding this comment.
This check is needed to avoid focus-ring from getting removed on date click. Currently, it happens because FocusMixin is also used in vaadin-month-calendar which resets keyboardActive flag.
| if (this._openedWithFocusRing && this.hasAttribute('focused')) { | ||
| this.setAttribute('focus-ring', ''); | ||
| } else if (!this.hasAttribute('focused')) { | ||
| this.blur(); |
There was a problem hiding this comment.
This logic is removed without replacement because it wasn't working anyways (focus is restored after a timeout). Furthermore, the case of calling input.blur() is covered by focus listener:
web-components/packages/date-picker/src/vaadin-date-picker-mixin.js
Lines 366 to 371 in 9e022ac
|
Kudos, SonarCloud Quality Gate passed!
|
|
This ticket/PR has been released with Vaadin 23.2.0.beta2 and is also targeting the upcoming stable 23.2.0 version. |
Description
Fixes #4154
TL;DR: after
focus-ringis set after focusing with keyboard, only remove it on blur when the overlay is closed.Problem
Currently, the logic for restoring
focus-ringin the date-picker is broken. The following happens when closing on click:<body>(in case of outside click) or<td>inside of<vaadin-month-calendar>(cell click),focusoutevent is fired on the<input>and_setFocused(false)removes thefocus-ringattribute,focus-ringis called too early, as the focus hasn't been restored to the<input>yet,vaadin-overlayrestores focus, but notfocus-ringbecause thekeyboardActiveisfalse.Solution
Here is how this behavior will be changed after this PR is merged.
focusinevent, calling_setFocused(true)sets the flag to indicate iffocus-ringshould be preserved,focusoutevent,_setFocused(false)is no longer called when opened (the focus will be restored anyways),focusinafter restoring focus back to the<input>, there is no extra_setFocused(true)call.keyboardActiveisfalsewhen restoring focus, it's not checked andfocus-ringis preserved.Type of change