Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit 0356bed

Browse files
crisbetoThomasBurleson
authored andcommitted
fix(datepicker): solve refocusing problems
* Fixes the datepicker not being able to refocus on the calendar icon, because the SVG element inside didn't propagate the focus event. * Fixes the datepicker sometimes not refocusing on the element that triggered it. Fixes #8960. Closes #9080
1 parent 3709f9b commit 0356bed

File tree

2 files changed

+23
-9
lines changed

2 files changed

+23
-9
lines changed

src/components/datepicker/datePicker.scss

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,19 @@ md-datepicker {
3333
box-sizing: border-box;
3434
background: none;
3535
vertical-align: middle;
36+
position: relative;
37+
38+
// Captures any of the click events. This is necessary, because the button has a SVG
39+
// icon which doesn't propagate the focus event, causing inconsistent behaviour.
40+
&:before {
41+
top: 0;
42+
left: 0;
43+
bottom: 0;
44+
right: 0;
45+
position: absolute;
46+
content: '';
47+
speak: none;
48+
}
3649
}
3750

3851
// The input into which the user can type the date.

src/components/datepicker/js/datepickerDirective.js

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -682,28 +682,29 @@
682682
if (this.isCalendarOpen) {
683683
var self = this;
684684

685+
self.detachCalendarPane();
686+
self.ngModelCtrl.$setTouched();
687+
688+
self.documentElement.off('click touchstart', self.bodyClickHandler);
689+
window.removeEventListener('resize', self.windowResizeHandler);
690+
685691
self.calendarPaneOpenedFrom.focus();
686692
self.calendarPaneOpenedFrom = null;
687693

688694
if (self.openOnFocus) {
689-
// Ensures that all focus events have fired before detaching
695+
// Ensures that all focus events have fired before resetting
690696
// the calendar. Prevents the calendar from reopening immediately
691697
// in IE when md-open-on-focus is set. Also it needs to trigger
692698
// a digest, in order to prevent issues where the calendar wasn't
693699
// showing up on the next open.
694-
this.$mdUtil.nextTick(detach);
700+
self.$mdUtil.nextTick(reset);
695701
} else {
696-
detach();
702+
reset();
697703
}
698704
}
699705

700-
function detach() {
701-
self.detachCalendarPane();
706+
function reset(){
702707
self.isCalendarOpen = self.isOpen = false;
703-
self.ngModelCtrl.$setTouched();
704-
705-
self.documentElement.off('click touchstart', self.bodyClickHandler);
706-
window.removeEventListener('resize', self.windowResizeHandler);
707708
}
708709
};
709710

0 commit comments

Comments
 (0)