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 initial positioning

See original GitHub issue

Bug, feature request, or proposal:

I have a project where the autocomplete dropdown does not properly position itself until it the input box that it is acting upon is unfocused and refocused. It initially extends past the bottom of the screen, choosing to initially position on the bottom of its input box.

Perhaps there could be a directive to force positioning of an autocomplete dropdown?

What is the expected behavior?

Expected behavior is for the autocomplete dropdown to recognize that it will be off-screen if it extends downward and instead position itself above the input box.

What is the current behavior?

In its current behavior, the autocomplete dropdown only calculates its position properly once its input box has been refocused. Switching tabs also causes the autocomplete dropdown to position properly.

What are the steps to reproduce?

The project in which this bug is occurring is already large and mature. I have, as of yet, been unable to reproduce this issue within a simple context.

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

There may be cases where the code does not properly position the autocomplete dropdown. Adding a directive or other such mechanism for forcing positioning may prove useful.

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

@angular/cli: 1.5.0
@angular/material: 2.0.0-beta.12
typescript: 2.3.3
OS: (Gentoo) Linux
Browsers: webkit and gecko

Is there anything else we should know?

I don’t particularly expect great support since I am unable to provide reproducable steps, but thanks in advance anybody’s time in addressing this matter.

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:4
  • Comments:11 (2 by maintainers)

github_iconTop GitHub Comments

5reactions
oxmanromancommented, Mar 15, 2018

Is there any update in this topic? Same issue

1reaction
oxmanromancommented, Mar 28, 2018

What you can do for now is just triggering a fake window resize event, same as they do in their tests, after you get the async results.

You can do this with window.dispatchEvent(new Event('resize')). Obviously not the best solution, just a temporal one until they have the time to fix the bug.

Updated reproduction with fix here.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Material UI Autocomplete dropdown positioning - Stack Overflow
Is there any easy way to customize Material UI Autocomplete so it Popper dropdown can be positioned relative to the text cursor (Similar...
Read more >
Ajust the position of autocomplete fields - Drupal Answers
1 Answer 1 ... This should be a CSS positioning issue, whether it is caused by padding, margining, position, top, left, right, or...
Read more >
Place Autocomplete | Maps JavaScript API - Google Developers
When you select an autocomplete result the sample then calls the getPlace() method, and then it opens an info window to display place...
Read more >
Get, Set, and Default Values in MUI Autocomplete and TextField
Do you want to build a full MUI app from beginning to end, learn every aspect of the sx prop, styled API, and...
Read more >
Autocomplete absolute positioning [35819816] - Visible to Public
The pac-container autocompletion div has position absolute. This causes any resize of the browser window / movement of controls on the page to...
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