Skip to content

Commit

Permalink
Merge pull request #101 from vaadin/fix/ie11-open-2
Browse files Browse the repository at this point in the history 
Fix ie11 dropdown open issue
  • Loading branch information
@tehapo
tehapo committed Mar 10, 2016
2 parents caf3f07 + 2cb45a3 commit 38f1093
Show file tree
Hide file tree
Showing 4 changed files with 47 additions and 24 deletions.
26 changes: 24 additions & 2 deletions test/basic.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,17 +203,39 @@
});
});

it('should scroll to a date on open', function() {
// We must scroll to a date on every open because at least IE11 seems to reset
// scrollTop while the dropdown is closed. This will result in all kind of problems.
var spy = sinon.spy(datepicker.$.overlay, 'scrollToDate');
var openTimes = 0;
datepicker.addEventListener('iron-overlay-opened', function() {
expect(spy.called).to.be.true;
spy.reset();
if (openTimes > 2) {
done();
} else {
datepicker.close();
}
});
datepicker.addEventListener('iron-overlay-closed', function() {
datepicker.open();
});
datepicker.open();
});

describe('window scroll realign', function() {

it('should realign on window scroll', function(done) {
datepicker.open();
datepicker.addEventListener('iron-overlay-opened', function() {
var spy = sinon.spy(datepicker, '_onWindowScroll');
Polymer.Base.fire('scroll', {}, {node: window});
Polymer.Base.fire('scroll', {}, {
node: window
});
datepicker.async(function() {
expect(spy.called).to.be.true;
done();
}, 1);
}, 100);
});
});

Expand Down
2 changes: 1 addition & 1 deletion test/keyboard-navigation.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@
}

function focusedDate() {
return overlay()._focusedDate;
return overlay().focusedDate;
}

beforeEach(function() {
Expand Down
24 changes: 12 additions & 12 deletions vaadin-date-picker-overlay.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -253,7 +253,7 @@
<div id="fade"></div>
<vaadin-infinite-scroller id="scroller" on-scroll="_onMonthScroll" on-touchstart="_onMonthScroll" on-track="_track" item-height="250" buffer-size="6">
<template>
<vaadin-month-calendar i18n="[[i18n]]" month="[[_dateAfterXMonths(index)]]" selected-date="{{selectedDate}}" focused-date="[[_focusedDate]]"></vaadin-month-calendar>
<vaadin-month-calendar i18n="[[i18n]]" month="[[_dateAfterXMonths(index)]]" selected-date="{{selectedDate}}" focused-date="[[focusedDate]]"></vaadin-month-calendar>
</template>
</vaadin-infinite-scroller>
<vaadin-infinite-scroller id="yearScroller" on-tap="_onYearTap" on-scroll="_onYearScroll" on-touchstart="_onYearScroll" item-height="150" buffer-size="10">
Expand Down Expand Up @@ -295,7 +295,7 @@
/**
* Date value which is focused using keyboard.
*/
_focusedDate: {
focusedDate: {
type: Date,
observer: '_focusedDateChanged'
},
Expand Down Expand Up @@ -392,7 +392,7 @@
},

_scrollToCurrentMonth: function() {
this._focusedDate = new Date();
this.focusedDate = new Date();
this.scrollToDate(new Date(), true);

// focus for keyboard navigation.
Expand Down Expand Up @@ -578,23 +578,23 @@
this._moveFocusByDays(-1);
break;
case 'enter':
if (this._focusedDate) {
this.selectedDate = this._focusedDate;
if (this.focusedDate) {
this.selectedDate = this.focusedDate;
}
this._close();
break;
case 'space':
if (this._dateEquals(this._focusedDate, this.selectedDate)) {
if (this._dateEquals(this.focusedDate, this.selectedDate)) {
this.selectedDate = '';
} else {
this.selectedDate = this._focusedDate;
this.selectedDate = this.focusedDate;
}
break;
case 'home':
this._focusedDate = new Date(focus.getFullYear(), focus.getMonth(), 1);
this.focusedDate = new Date(focus.getFullYear(), focus.getMonth(), 1);
break;
case 'end':
this._focusedDate = new Date(focus.getFullYear(), focus.getMonth() + 1, 0);
this.focusedDate = new Date(focus.getFullYear(), focus.getMonth() + 1, 0);
break;
case 'pagedown':
this._moveFocusByMonths(e.shiftKey ? 12 : 1);
Expand All @@ -616,19 +616,19 @@
},

_currentlyFocusedDate: function() {
return this._focusedDate || this.selectedDate || this.initialPosition || new Date();
return this.focusedDate || this.selectedDate || this.initialPosition || new Date();
},

_moveFocusByDays: function(days) {
var focus = this._currentlyFocusedDate();

this._focusedDate = new Date(focus.getFullYear(), focus.getMonth(), focus.getDate() + days);
this.focusedDate = new Date(focus.getFullYear(), focus.getMonth(), focus.getDate() + days);
},

_moveFocusByMonths: function(months) {
var focus = this._currentlyFocusedDate();

this._focusedDate = new Date(focus.getFullYear(), focus.getMonth() + months, focus.getDate());
this.focusedDate = new Date(focus.getFullYear(), focus.getMonth() + months, focus.getDate());
}
});
</script>
Expand Down
19 changes: 10 additions & 9 deletions vaadin-date-picker.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,9 +130,7 @@

<paper-input-container id="inputcontainer" hideclear$="[[_hideClearIcon(_selectedDate, _opened, _fullscreen)]]" tabindex="0" on-touchend="_preventDefault" on-tap="open" on-keydown="_onKeydown">
<label id="label">[[label]]</label>
<input id="input" is="iron-input" autocomplete="off"
bind-value="[[_formatDisplayed(_selectedDate, i18n.formatDate)]]" type="text" invalid="[[invalid]]" name$="[[name]]"
required$="[[required]]" tabindex="-1" on-focus="_focusInputContainer">
<input id="input" is="iron-input" autocomplete="off" bind-value="[[_formatDisplayed(_selectedDate, i18n.formatDate)]]" type="text" invalid="[[invalid]]" name$="[[name]]" required$="[[required]]" tabindex="-1" on-focus="_focusInputContainer">

<div suffix id="clear" on-tap="_clear" hidden$="[[_hideClearIcon(value, opened)]]">
<iron-icon icon="clear"></iron-icon>
Expand All @@ -146,7 +144,7 @@
</paper-input-container>

<iron-dropdown id="dropdown" fullscreen$=[[_fullscreen]] allow-outside-scroll on-iron-overlay-opened="_onOverlayOpened" on-iron-overlay-closed="_onOverlayClosed" on-iron-overlay-canceled="_preventCancelOnInputContainerTap" opened="{{_opened}}">
<vaadin-date-picker-overlay id="overlay" i18n="[[i18n]]" fullscreen$=[[_fullscreen]] label=[[label]] on-date-tap="close" selected-date="{{_selectedDate}}" class="dropdown-content" on-close="close" focused-date="[[_focusedDate]]" tabindex="-1"></vaadin-date-picker-overlay>
<vaadin-date-picker-overlay id="overlay" i18n="[[i18n]]" fullscreen$=[[_fullscreen]] label=[[label]] on-date-tap="close" selected-date="{{_selectedDate}}" class="dropdown-content" on-close="close" focused-date="[[focusedDate]]" tabindex="-1"></vaadin-date-picker-overlay>
</iron-dropdown>

<iron-media-query query="[[_fullscreenMediaQuery]]" query-matches="{{_fullscreen}}"></iron-media-query>
Expand Down Expand Up @@ -244,8 +242,11 @@
type: Object,
value: function() {
return {
monthNames: ['January','February','March','April','May','June','July','August','September','October','November','December'],
weekdaysShort: ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'],
monthNames: [
'January', 'February', 'March', 'April', 'May',
'June', 'July', 'August', 'September', 'October', 'November', 'December'
],
weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
firstDayOfWeek: 0,
today: 'today',
cancel: 'cancel',
Expand Down Expand Up @@ -343,8 +344,8 @@

_onOverlayOpened: function() {
this.$.overlay.initialPosition = this._selectedDate ||
this.$.overlay.initialPosition ||
this._parseDate(this.initialPosition) || new Date();
this.$.overlay.initialPosition || this._parseDate(this.initialPosition) || new Date();
this.$.overlay.scrollToDate(this.$.overlay.focusedDate || this.$.overlay.initialPosition);

this.listen(window, 'scroll', '_onWindowScroll');

Expand Down Expand Up @@ -404,7 +405,7 @@
},

_preventCancelOnInputContainerTap: function(e) {
if (e.detail.type === 'tap' && e.detail.path.indexOf(this.$.inputcontainer) > -1) {
if (e.detail.type === 'tap' && e.detail.path && e.detail.path.indexOf(this.$.inputcontainer) > -1) {
e.preventDefault();
}
},
Expand Down

0 comments on commit 38f1093

Please sign in to comment.