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

fix(datepicker): ensure that all month/year elements have the expected height #9893

Merged
merged 1 commit into from
Oct 27, 2016

Conversation

crisbeto
Copy link
Member

The datepicker's calendar uses md-virtual-repeat to render itself. The virtual repeater expects that all elements that it has rendered will have a certain height, however this may not be the case if it renders an empty month/year element in the calendar. If this happens (it's usually if the current value and the maximum date are in the same month), the calendar can start jumping while scrolling.

This change adds an empty <tr> that will ensure that even empty elements have a height. When the element is compiled, the empty <tr> will be overwritten.

Fixes #9863.

@crisbeto crisbeto added the needs: review This PR is waiting on review from the team label Oct 23, 2016
@crisbeto crisbeto added this to the 1.1.3 milestone Oct 23, 2016
@ThomasBurleson ThomasBurleson added P0 - Presubmit First and removed needs: review This PR is waiting on review from the team labels Oct 23, 2016
@ThomasBurleson
Copy link
Contributor

@jelbourn - ping for final review.

// The <tr> ensures that the <tbody> will always have the
// proper height, even if it's empty. If it's content is
// compiled, the <tr> will be overwritten.
'<tr style="height:' + TBODY_HEIGHT + 'px;"></tr>' +
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Empty <tr> should have aria-hidden

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated.

…d height

The datepicker's calendar uses `md-virtual-repeat` to render itself. The virtual repeater expects that all elements that it has rendered will have a certain height, however this may not be the case if it renders an empty month/year element in the calendar. If this happens (it's usually if the current value and the maximum date are in the same month), the calendar can start jumping while scrolling.

This change adds an empty `<tr>` that will ensure that even empty elements have a height. When the element is compiled, the empty `<tr>` will be overwritten.

Fixes angular#9863.
@crisbeto crisbeto force-pushed the 9863/datepicker-scroll-jump branch from be22fd7 to de5e7e9 Compare October 24, 2016 17:47
@jelbourn jelbourn merged commit b3b8fab into angular:master Oct 27, 2016
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants