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

Large Dropdown Menu Fix #22594

Merged
merged 21 commits into from
Oct 8, 2018
Merged

Large Dropdown Menu Fix #22594

merged 21 commits into from
Oct 8, 2018

Conversation

jslavitz
Copy link
Contributor

@jslavitz jslavitz commented Oct 3, 2018

Fixed #20333

@@ -335,19 +335,33 @@ class _DropdownRoute<T> extends PopupRoute<_DropdownRouteResult<T>> {
final double buttonTop = buttonRect.top;
final double selectedItemOffset = selectedIndex * _kMenuItemHeight + kMaterialListPadding.top;
double menuTop = (buttonTop - selectedItemOffset) - (_kMenuItemHeight - buttonRect.height) / 2.0;
final double originalMenuTop = menuTop;
const double topPreferredLimit = _kMenuItemHeight;
if (menuTop < topPreferredLimit)
menuTop = math.min(buttonTop, topPreferredLimit);
Copy link
Contributor

Choose a reason for hiding this comment

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

how about this case, does it affect things?

Copy link
Contributor Author

@jslavitz jslavitz Oct 3, 2018

Choose a reason for hiding this comment

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

It doesn't because the menuTop variable is just being changed to a slightly larger value that will never be bigger than buttonTop. (So [buttonTop - menuTop] will always be >= 0).

int value = 0;
final List<DropdownMenuItem<int>> items = <DropdownMenuItem<int>>[];
for (int i = 0; i < 222; ++i)
items.add(DropdownMenuItem<int>(value: i, child: Text('$i')));
Copy link
Contributor

Choose a reason for hiding this comment

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

there's a constructor that will autogenerate a list like this

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Which looks like? :)


await tester.tap(find.text('0'));
await tester.pump();
await tester.pump(const Duration(seconds: 1));
Copy link
Contributor

Choose a reason for hiding this comment

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

what should the scroll offset be at the start of the animation? should it be 0.0 then also, or does the menu start scrolled so that the items line up, and then fling back?

@Hixie
Copy link
Contributor

Hixie commented Oct 3, 2018

cc @mklim

@Hixie
Copy link
Contributor

Hixie commented Oct 3, 2018

cc @HansMuller

@googlebot
Copy link

So there's good news and bad news.

👍 The good news is that everyone that needs to sign a CLA (the pull request submitter and all commit authors) have done so. Everything is all good there.

😕 The bad news is that it appears that one or more commits were authored or co-authored by someone other than the pull request submitter. We need to confirm that all authors are ok with their commits being contributed to this project. Please have them confirm that here in the pull request.

Note to project maintainer: This is a terminal state, meaning the cla/google commit status will not change from this state. It's up to you to confirm consent of all the commit author(s), set the cla label to yes (if enabled on your project), and then merge this pull request when appropriate.

@googlebot googlebot added cla: no and removed cla: yes labels Oct 3, 2018
@flutter flutter deleted a comment from googlebot Oct 3, 2018
@flutter flutter deleted a comment from googlebot Oct 3, 2018
@HansMuller
Copy link
Contributor

I think the existing code is somewhat counter intuitive (using math.min to adjust the top of the menu and math.max to adjust the bottom for example) because
the menu's limits are actually the min(buttonTop, _kMenuItemHeight) and max(bottonTop + _kMenuItemHeight, screenHeight - _kMenuItemHeight).

Despite the fact that the menu's limits are potentially larger, maxMenuHeight should still be screenHeight - 2 * _kMenuItemHeight.

In other words we're OK for the top or bottom of the menu to be offscreen if the top or bottom of the dropdown button is overlaps the edge of the screen.

I think the scrollOffset should always be math.max(0.0, selectedItemOffset - (buttonTop - menuTop)). That accounts for the fact that the selected item can't always be scrolled so that it lines up with the dropdown button.

Copy link
Contributor

@HansMuller HansMuller left a comment

Choose a reason for hiding this comment

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

This is much easier to read than it was. NICE

LGTM

// If there are too many elements in the menu, we need to shrink it down
// so it is at most the maxMenuHeight.
final double menuHeight = math.min(maxMenuHeight, preferredMenuHeight);

double bottom = menuTop + menuHeight;
Copy link
Contributor

Choose a reason for hiding this comment

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

For the sake of consistency, you might as well call bottom menuBottom.

if (menuTop < topLimit)
menuTop = math.min(buttonTop, topLimit);
if (bottom > bottomLimit) {
bottom = math.max(buttonTop + _kMenuItemHeight, bottomLimit);
Copy link
Contributor

Choose a reason for hiding this comment

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

buttonTop + _kMenuItemHeight should be buttonBottom

@jslavitz jslavitz added cla: yes and removed cla: no labels Oct 8, 2018
@googlebot
Copy link

A Googler has manually verified that the CLAs look good.

(Googler, please make sure the reason for overriding the CLA status is clearly documented in these comments.)

@jslavitz jslavitz merged commit d422e85 into flutter:master Oct 8, 2018
@jslavitz jslavitz deleted the romk/master branch December 3, 2018 22:26
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Aug 8, 2021
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.

None yet

6 participants