Skip to content

Feature request, Autocomplete: Defer calculation of width until actually showing dropdown #4146

@wulfsberg

Description

@wulfsberg

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

The width of the dropdown is based on the width of the input field when the dropdown is shown.

What is the current behavior?

The width of the dropdown is based on the width of the input field when the field gains focus.

What are the steps to reproduce?

This plunkr simulates a search box which takes up less space until actually in use:
http://plnkr.co/edit/JqeCALpdEQtp1CytTU3k?p=preview

  • Click in the search field to focus and expand it.
  • Type something.

Notice: The dropdown is only as wide as the search field was before expanding.

  • Leave some text in the field and click outside it. The field keeps its size (due to a CSS class set when it contains a value).
  • Click back in the search field.

Notice: The dropdown is now as wide as the input field.

What is the use-case or motivation for changing an existing behavior?

Being able to dynamically resize the input field when used as a floating "widget" over a map interface, yielding as much screen estate to the map as possible when the input field is not in active use by the user.

Which versions of Angular, Material, OS, browsers are affected?

Angular 4.0.1, Material2 beta.3

Is there anything else we should know?

If the width is set without a transition, the calculation picks up the new width. I am not sure if there is any specification of the timing of events vs CSS layout, but I suspect this is an arbitrary race which the CSS just happens to win.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions