Overlay-based components should handle page scroll gracefully #4093

jelbourn · 2017-04-13T22:42:45Z

Creating this issue to track this problem for menu, tooltip, select, autocomplete, datepicker, dialog, snackbar.

Approach we will be taking:

Default behavior will be to reposition the overlay on scroll using the ScrollDispatcher
Behavior can be changed to disable scrolling instead on a strictly opt-in basis
Implementation of scroll-blocking must be overridable by end-user

The text was updated successfully, but these errors were encountered:

* Adds the `scrollStrategy` option to the overlay state, allowing the consumer to specify what scroll handling strategy they'd want to use. Also includes a `ScrollStrategy` interface that users can utilize to build their own strategies. * Adds the `RepositionScrollStrategy`, `CloseScrollStrategy` and `NoopScrollStrategy` as initial, out-of-the-box strategies. * Sets the `RepositionScrollStrategy` by default on all the connected overlays and removes some repetitive logic from the tooltip, autocomplete, menu and select. **Note:** I'll add a `BlockScrollStrategy` in a follow-up PR. I wanted to keep this one shorter. Relates to angular#4093.

* feat(overlay): add scroll handling strategies * Adds the `scrollStrategy` option to the overlay state, allowing the consumer to specify what scroll handling strategy they'd want to use. Also includes a `ScrollStrategy` interface that users can utilize to build their own strategies. * Adds the `RepositionScrollStrategy`, `CloseScrollStrategy` and `NoopScrollStrategy` as initial, out-of-the-box strategies. * Sets the `RepositionScrollStrategy` by default on all the connected overlays and removes some repetitive logic from the tooltip, autocomplete, menu and select. **Note:** I'll add a `BlockScrollStrategy` in a follow-up PR. I wanted to keep this one shorter. Relates to #4093. * fix: missing types on the scroll dispatcher * refactor: use class for fake scroll strategy * refactor: add onAttached and onDetached observables * chore: rename observables

sabithpocker · 2017-05-08T19:47:25Z

Auto complete overlayed dropdown position is not updated on scroll.

sabithpocker · 2017-05-12T10:18:29Z

Autocomplete does support repositioning upon resize / scroll. But not when dropdown list items change and there by height of dropdown.
Also why is the position dependent on height of dropdown? it can be accommodated above/below just based on availability of space? Or is there a priority to show it below?

Consider a case where one option is already entered("png-alpha" in screenshot). Now when focus is back in the input there is just enough space below the control to show one option(already selected one) and it fits in.

Figure 1: single item accommodated in just-enough-space

But if we delete couple of characters from the input text, more options showup but doesn't update position to above neither does it allow to scroll beyond document height.

Figure 2: broadening search critereon brings in more items but not accessible via scroll/neither does it reposition

If I do a scroll or blur/focus-back the repositioning is triggered correctly, but not upon change in "input text" or "dropdown-list" length.

_Figure 3: clicking out to blur and focusing in back fixes the issue and triggers repositioning _

This can be fixed by either of the following in my opinion:
1. Updating position when input text changes along with scroll, which might eat up performance.
2. Make position(above/below) irrespective of height of dropdown and only based on proximity of input element to screen edges. This way figure 1 should show the options above irrespective of the fact that it can be accommodated below.

using master "@angular/material": "git+https://github.com/angular/material2-builds.git"

crisbeto · 2017-05-12T10:54:05Z

#4469 will reposition the autocomplete panel when the amount of items changes.

Adds the `BlockScrollStrategy` which, when activated, will prevent the user from scrolling. For now it is only used in the dialog. Relates to angular#4093.

Adds the `BlockScrollStrategy` which, when activated, will prevent the user from scrolling. For now it is only used in the dialog. Relates to #4093.

sudheeshcm · 2017-05-24T06:53:00Z

@crisbeto @jelbourn
Isn't this fix merged in the latest beta version(2.0.0-beta.5). It works in the example provided.
Still my autocomplete options scrolls with the page.

If not please let me know, how to include those changes.

Thanks,
Sudheesh

Zefling · 2017-05-24T11:18:57Z

@sudheeshcm Are you in this case : #4557 ?

sudheeshcm · 2017-05-25T06:16:37Z

@Zefling I'm not exactly sure. Tried removing all the "overflow: auto" styles, and still have this issue.

tcrack326 · 2017-05-26T13:32:16Z

Datepicker seems to be in a fixed position and does not stay in same position when scrolling away from input. This may be intentional to keep the user from scrolling away before making a choice but if you have a datepicker near the bottom of a page then part of the datepicker will be hidden.

crisbeto · 2017-05-26T13:45:11Z

There's a pending PR (#4696) that adds positioning improvements to the datepicker.

…e/override custom strategies * Refactors the overlay setup to allow for scroll strategies to be passed in by name, instead of by instance. * Handles the scroll strategy dependency injection automatically. * Adds an API for registering custom scroll strategies and overriding the existing ones. * Adds a second parameter to the `attach` method, allowing for a config object to be passed in. * Throws an error if there's an attempt to attach a scroll strategy multiple times. This is mostly a sanity check to ensure that we don't cache the scroll strategy instances. Relates to angular#4093.

…e/override custom strategies (#4855) * feat(overlay): more flexible scroll strategy API and ability to define/override custom strategies * Refactors the overlay setup to allow for scroll strategies to be passed in by name, instead of by instance. * Handles the scroll strategy dependency injection automatically. * Adds an API for registering custom scroll strategies and overriding the existing ones. * Adds a second parameter to the `attach` method, allowing for a config object to be passed in. * Throws an error if there's an attempt to attach a scroll strategy multiple times. This is mostly a sanity check to ensure that we don't cache the scroll strategy instances. Relates to #4093. * refactor: switch to new approach without ReflectiveInjector * refactor: switch to better approach * refactor: switch to even simpler approach * chore: address feedback

… component Adds providers to the autocomplete, connected overlay, datepicker, dialog, menu, select and tooltip components, that allow for the default scroll strategy to be overwritten. Fixes angular#4093.

… component Adds providers to the autocomplete, connected overlay, datepicker, dialog, menu, select and tooltip components, that allow for the default scroll strategy to be overwritten. Fixes #4093.

… component Adds providers to the autocomplete, connected overlay, datepicker, dialog, menu, select and tooltip components, that allow for the default scroll strategy to be overwritten. Fixes angular#4093.

… component (#5134) Adds providers to the autocomplete, connected overlay, datepicker, dialog, menu, select and tooltip components, that allow for the default scroll strategy to be overwritten. Fixes #4093.

angular-automatic-lock-bot · 2019-09-06T17:01:43Z

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.}

jelbourn added the P2 The issue is important to a large percentage of users, with a workaround label Apr 13, 2017

jelbourn assigned crisbeto Apr 13, 2017

This was referenced Apr 13, 2017

Autocomplete and page scroll #3219

Closed

md-select does not disable scrolling of page when open #4085

Closed

Parent page scroll when scrolling inside long md-select dropdown #2732

Closed

md-dialog should block page scroll #3908

Closed

jelbourn added this to Not started in beta.4 Apr 14, 2017

jelbourn moved this from Not started to In progress in beta.4 Apr 14, 2017

crisbeto mentioned this issue Apr 26, 2017

feat(overlay): add scroll handling strategies #4293

Merged

jelbourn mentioned this issue May 4, 2017

Overlay supports repositioning upon resize / scroll #1430

Closed

epelc mentioned this issue May 11, 2017

Use basic css to show autocomplete md-option list instead of a popup with javascript calculating positions. #4477

Closed

crisbeto added a commit to crisbeto/material2 that referenced this issue May 12, 2017

feat(overlay): add scroll blocking strategy

b45c660

Adds the `BlockScrollStrategy` which, when activated, will prevent the user from scrolling. For now it is only used in the dialog. Relates to angular#4093.

crisbeto added a commit to crisbeto/material2 that referenced this issue May 12, 2017

feat(overlay): add scroll blocking strategy

b544211

Adds the `BlockScrollStrategy` which, when activated, will prevent the user from scrolling. For now it is only used in the dialog. Relates to angular#4093.

crisbeto mentioned this issue May 12, 2017

feat(overlay): add scroll blocking strategy #4500

Merged

crisbeto added a commit to crisbeto/material2 that referenced this issue May 12, 2017

feat(overlay): add scroll blocking strategy

5cd53be

Adds the `BlockScrollStrategy` which, when activated, will prevent the user from scrolling. For now it is only used in the dialog. Relates to angular#4093.

jelbourn pushed a commit that referenced this issue May 15, 2017

feat(overlay): add scroll blocking strategy (#4500)

6842046

Adds the `BlockScrollStrategy` which, when activated, will prevent the user from scrolling. For now it is only used in the dialog. Relates to #4093.

crisbeto mentioned this issue May 28, 2017

feat(overlay): more flexible scroll strategy API and ability to define/override custom strategies #4855

Merged

hemantjadon mentioned this issue Jun 4, 2017

Make auto-complete box fixed fossasia/loklak_search#375

Closed

jelbourn mentioned this issue Jun 6, 2017

On ipad in Safari page scroll is not blocked when md-select options are visible #3533

Closed

crisbeto added the has pr label Jun 14, 2017

crisbeto mentioned this issue Jun 14, 2017

feat(overlay): add providers for overriding the scroll strategies per component #5134

Merged

jelbourn closed this as completed in #5134 Jul 17, 2017

axtho mentioned this issue Oct 19, 2017

autocomplete: panel does not reposition on page scroll #7897

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Overlay-based components should handle page scroll gracefully #4093

Overlay-based components should handle page scroll gracefully #4093

jelbourn commented Apr 13, 2017

sabithpocker commented May 8, 2017

sabithpocker commented May 12, 2017 •

edited

crisbeto commented May 12, 2017

sudheeshcm commented May 24, 2017 •

edited

Zefling commented May 24, 2017

sudheeshcm commented May 25, 2017

tcrack326 commented May 26, 2017

crisbeto commented May 26, 2017

angular-automatic-lock-bot bot commented Sep 6, 2019

Overlay-based components should handle page scroll gracefully #4093

Overlay-based components should handle page scroll gracefully #4093

Comments

jelbourn commented Apr 13, 2017

sabithpocker commented May 8, 2017

sabithpocker commented May 12, 2017 • edited

crisbeto commented May 12, 2017

sudheeshcm commented May 24, 2017 • edited

Zefling commented May 24, 2017

sudheeshcm commented May 25, 2017

tcrack326 commented May 26, 2017

crisbeto commented May 26, 2017

angular-automatic-lock-bot bot commented Sep 6, 2019

sabithpocker commented May 12, 2017 •

edited

sudheeshcm commented May 24, 2017 •

edited