search

debois / elm-mdl

Elm-port of the Material Design Lite CSS/JS library
Apache License 2.0
965 stars 133 forks source link

Select dropdown doesn't redraw dropdown size when elements are added to it #369

Open jonfk opened 6 years ago

jonfk commented 6 years ago

Context

This issue concerns the Material.Select and Material.Dropdown.Item modules of the v9 branch.

I am using the Select component as a search box that makes an api call and returns a list of suggestions based on the input.

Reproduction

I have a repository where I reproduced the bug and a webpage where you can see the behaviour I describe here:

Problem

When elements are added to the dropdown once it's already opened, the dropdown doesn't react to the new elements and increase in size when necessary.

This is what I see, since when the dropdown is originally opened, it didn't contain any elements.

screen shot 2018-02-07 at 2 15 53 pm

This is what I see when I open and close it.

screen shot 2018-02-07 at 2 15 43 pm

Workarounds

One workaround I found is to add dummy empty elements to the dropdown so that when it first opens, it already has some space for the suggestions to come to be added. The problem is that if more than the number of dummy elements come to the page, they won't be visible.

Another workaround I could see is to manually open and close the dropdown whenever I update the elements of the dropdown. The problem is that I cannot currently do this since there aren't any controls to do this in the API as I can see. If this is possible, please let me know.

Thanks for taking a look and thanks for the awesome library. It's been a joy to use so far!