Autocomplete panel should base width on input-container, not input
See original GitHub issueBug, feature request, or proposal:
Bug
Expected
The autocomplete panel does not change its width when the input resizes, only when the input container does.
Current
The autocomplete panel resizes when an mdSuffix
is rendered, thus changing the size of the actual input
.
Reproduction
https://plnkr.co/edit/VrcrcUBKbwuoOoxc8byM?p=preview
Motivation
Using a “clear input” button on an autocomplete input
Proposed change
/** Returns the width of the input element, so the panel width can match it. */
private _getHostWidth(): number {
- return this._element.nativeElement.getBoundingClientRect().width;
+ return this._inputContainer
+ ? this._inputContainer._elementRef.nativeElement.getBoundingClientRect().width
+ : this._element.nativeElement.getBoundingClientRect().width;
}
Issue Analytics
- State:
- Created 6 years ago
- Comments:9 (8 by maintainers)
Top Results From Across the Web
How to change md-autocomplete width in Angular 2 Material 2?
Specify the width of the autocomplete panel. Can be any CSS sizing value, otherwise it will match the width of its host. Share....
Read more >Demos > Autocomplete - Angular Material
Use md-autocomplete to search for matches from local or remote data sources. ... By default, md-autocomplete will cache results when performing a query....
Read more >VS Code API | Visual Studio Code Extension API
VS Code API is a set of JavaScript APIs that you can invoke in your Visual Studio Code extension. This page lists all...
Read more >AngularJS Material - Demos > Autocomplete - Introduction
Disable caching of queries? Disable the input? By default, md-autocomplete will cache results when performing a query. After the initial call is performed, ......
Read more >paper-input-place | Vaadin
Google Places Autocomplete # paper-input-place Google Places ... If true ( hide-icon attribute present) the element will not display the ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
That should work, I wasn’t aware that we were even exporting that reference. I’ll update my PR.
@crisbeto what if it were instead attached to the container’s
underlineRef
like datepicker is doing