Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(autocomplete): don't scroll panel when option is visible #4905

Merged
merged 2 commits into from
Jun 28, 2017

Conversation

willshowell
Copy link
Contributor

When scrolling down to an option well below the fold and then scrolling back up a couple of options, it feels jarring to have the selected option "stick" to the bottom of the panel. This fix keeps the panel from scrolling when the selected option is fully visible.

cc @kara


Before
autocomplete-before

After
autocomplete-after

@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Jun 1, 2017
@willshowell
Copy link
Contributor Author

@jelbourn could I get this assigned? 😄

@willshowell
Copy link
Contributor Author

@kara I would really appreciate if you could review this! I think it makes keyboard scrolling feel more natural.

Copy link
Contributor

@kara kara left a comment

Choose a reason for hiding this comment

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

Looks good; mostly comment readability nits. Being especially nitpicky because scrolling/positioning is pretty complicated.

@@ -315,15 +315,30 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
/**
* Given that we are not actually focusing active options, we must manually adjust scroll
* to reveal options below the fold. First, we find the offset of the option from the top
* of the panel. The new scrollTop will be that offset - the panel height + the option
* height, so the active option will be just visible at the bottom of the panel.
* of the panel. If that offset if below the fold, the new scrollTop will be the offset -
Copy link
Contributor

Choose a reason for hiding this comment

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

Typo: if below the fold -> is below the fold

// Scroll up to reveal selected option above the panel
if (optionOffset < panelTop) {
this.autocomplete._setScrollTop(optionOffset);
return;
Copy link
Contributor

Choose a reason for hiding this comment

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

If you used an if-else conditional, you could avoid using the early return here and on line 340. I think it might make it clearer that the two cases are mutually exclusive with fewer lines.

const newScrollTop =
const panelTop = this.autocomplete._getScrollTop();

// Scroll up to reveal selected option above the panel
Copy link
Contributor

Choose a reason for hiding this comment

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

Nit: above the panel -> scrolled above the panel top

When first reading the comment, I thought you meant literally above the panel element (not scrolled out of view).

return;
}

// Scroll down to reveal selection option below the panel
Copy link
Contributor

Choose a reason for hiding this comment

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

Typo: selection option below the panel -> selected option scrolled below the panel bottom

* height, so the active option will be just visible at the bottom of the panel.
* of the panel. If that offset if below the fold, the new scrollTop will be the offset -
* the panel height + the option height, so the active option will be just visible at the
* bottom of the panel. If that offset is above the top of the panel, the new scrollTop
Copy link
Contributor

Choose a reason for hiding this comment

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

Nit: above the top of the panel -> above the top of the visible panel

* of the panel. If that offset if below the fold, the new scrollTop will be the offset -
* the panel height + the option height, so the active option will be just visible at the
* bottom of the panel. If that offset is above the top of the panel, the new scrollTop
* will become the offset. If that offset is visible within the panel, the scrollTop is not
Copy link
Contributor

Choose a reason for hiding this comment

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

Nit: visible within the panel -> visible within the panel already.


// Expect no scrolling to have occurred. Still showing bottom of 6th option.
expect(scrollContainer.scrollTop)
.toEqual(32, `Expected panel to not scroll back.`);
Copy link
Contributor

Choose a reason for hiding this comment

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

Nit: The failure message is a bit vague. It seems like you should move the guidance in the comment to the failure message.

@kara kara assigned willshowell and unassigned kara Jun 27, 2017
@willshowell
Copy link
Contributor Author

@kara changes made!

Copy link
Contributor

@kara kara left a comment

Choose a reason for hiding this comment

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

LGTM

@kara kara added action: merge The PR is ready for merge by the caretaker and removed pr: needs cleanup / tests labels Jun 27, 2017
@tinayuangao tinayuangao merged commit d3af57d into angular:master Jun 28, 2017
amcdnl pushed a commit to amcdnl/material2 that referenced this pull request Jul 8, 2017
…#4905)

* fix(autocomplete): don't scroll panel if option is visible

* Clean up comments & indent by 4 on line continuations
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker cla: yes PR author has agreed to Google's Contributor License Agreement
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants