angular material (datepicker) 在任何基于键盘的操作之后,焦点在正文上
angular material (datepicker) focus is on body after any keyboard based operation
似乎每个使用日期选择器的操作都不会 return 焦点回到日期选择器输入或按钮,因此选项卡索引回到第一个元素。
你可以用官方demo来举例:https://material.angularjs.org/latest/demo/datepicker
查看源代码并进行调试 - 似乎在相关元素上触发了焦点操作,但即便如此 - 焦点已更改为文档正文。
/** Close the floating calendar pane. */
DatePickerCtrl.prototype.closeCalendarPane = function() {
if (this.isCalendarOpen) {
var self = this;
self.calendarPaneOpenedFrom.focus();
self.calendarPaneOpenedFrom = null;
if (self.openOnFocus) {
// Ensures that all focus events have fired before detaching
// the calendar. Prevents the calendar from reopening immediately
// in IE when md-open-on-focus is set. Also it needs to trigger
// a digest, in order to prevent issues where the calendar wasn't
// showing up on the next open.
this.$mdUtil.nextTick(detach);
} else {
detach();
}
}
function detach() {
self.detachCalendarPane();
self.isCalendarOpen = false;
self.ngModelCtrl.$setTouched();
self.documentElement.off('click touchstart', self.bodyClickHandler);
window.removeEventListener('resize', self.windowResizeHandler);
}
};
10倍
elad.
由于内部的 SVG 元素没有传播焦点事件而导致的日期选择器焦点问题中存在错误。
由 crisbeto 解决。
参考:https://github.com/crisbeto/material/commit/e8d4ad217dd2ad5a8e8875f9bdc1269679667e3b
似乎每个使用日期选择器的操作都不会 return 焦点回到日期选择器输入或按钮,因此选项卡索引回到第一个元素。
你可以用官方demo来举例:https://material.angularjs.org/latest/demo/datepicker
查看源代码并进行调试 - 似乎在相关元素上触发了焦点操作,但即便如此 - 焦点已更改为文档正文。
/** Close the floating calendar pane. */
DatePickerCtrl.prototype.closeCalendarPane = function() {
if (this.isCalendarOpen) {
var self = this;
self.calendarPaneOpenedFrom.focus();
self.calendarPaneOpenedFrom = null;
if (self.openOnFocus) {
// Ensures that all focus events have fired before detaching
// the calendar. Prevents the calendar from reopening immediately
// in IE when md-open-on-focus is set. Also it needs to trigger
// a digest, in order to prevent issues where the calendar wasn't
// showing up on the next open.
this.$mdUtil.nextTick(detach);
} else {
detach();
}
}
function detach() {
self.detachCalendarPane();
self.isCalendarOpen = false;
self.ngModelCtrl.$setTouched();
self.documentElement.off('click touchstart', self.bodyClickHandler);
window.removeEventListener('resize', self.windowResizeHandler);
}
};
10倍 elad.
由于内部的 SVG 元素没有传播焦点事件而导致的日期选择器焦点问题中存在错误。
由 crisbeto 解决。
参考:https://github.com/crisbeto/material/commit/e8d4ad217dd2ad5a8e8875f9bdc1269679667e3b