question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Autocomplete panel should base width on input-container, not input

See original GitHub issue

Bug, 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:closed
  • Created 6 years ago
  • Comments:9 (8 by maintainers)

github_iconTop GitHub Comments

1reaction
crisbetocommented, Jun 1, 2017

That should work, I wasn’t aware that we were even exporting that reference. I’ll update my PR.

1reaction
willshowellcommented, Jun 1, 2017

@crisbeto what if it were instead attached to the container’s underlineRef like datepicker is doing

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found