chips: md-autocomplete-suggestions-container doesn't appear on screen for large chip set

angular / material

Material design for AngularJS

https://material.angularjs.org/

MIT License

16.55k stars 3.39k forks source link

chips: md-autocomplete-suggestions-container doesn't appear on screen for large chip set #10631

Open brianrodecap opened 7 years ago

brianrodecap commented 7 years ago

Actual Behavior:

What is the issue? * For a very large chip input, md-autocomplete-suggestions-container may appear above the input and may be inaccessible if beyond the visible area.
What is the expected behavior? The suggestion container should appear in viewable area, closer to the cursor.

CodePen (or steps to reproduce the issue): *

CodePen Demo which shows your issue: http://codepen.io/anon/pen/wdJpMj
Details: Scroll to the bottom and attempt to add a new chip. If the top of the input container is not viewable, there is no way to access the suggestions-container.

AngularJS Versions: *

AngularJS Version: 1.5.11
AngularJS Material Version: 1.1.4

Additional Information:

Browser Type: * Chrome
Browser Version: * 58
OS: * Windows 7
Stack Traces: N/A

Splaktar commented 6 years ago

Updated CodePen for 1.1.7. Issue still exists. This seems like a real edge case though as using chips to select hundreds of elements is likely not a great UX. It would be nice to know more about the use case.

brianrodecap commented 6 years ago

The example in the CodePen is obnoxiously large to illustrate the issue in an unambiguous way. The legitimate use case exists where there is a limited viewable area and a few dozen chips. The suggestions-container should appear near the cursor.

moonykolo commented 6 years ago

Any solution yet? having the same problem the suggestuions container disapprears in small viewport

Splaktar commented 6 years ago

@moonykolo no solution yet. There are some other higher priority fixes that are being worked on for chips atm.

sujinecho18 commented 6 years ago

Is there any workaround? Does this issue exist in Angular Material 2?

sujinecho18 commented 6 years ago

@Splaktar

Splaktar commented 6 years ago

@sujinecho18 the only workarounds are to use md-max-chips to limit the number of chips or to use a different component if you need to allow multiple selection of a large set.

If anyone would like to investigate and provide some more details on the cause of the problem or suggest a possible fix, that would be appreciated. The scope of the changes would need to be fairly small though as we're in the middle of making many different fixes to chips and wouldn't want to create excessive conflicts.