Angular-material md-autocomplete append to body

[lillylykho]

Hello everyone!
I use awesome angular material feature md-autocomplete, but I have not found a property that I really need: append-to-body. Any ideas? Maybe it will be developed in the near future?

Thanks!

[epelc]

Not sure if they have it but it might be a good to add a parent option much like mdDialog and mdToast.

[marcysutton]

Can't you just put the directive next to the body? It isn't a service like mdDialog, which dynamically appends an interim element to the $rootElement or specified parent.

[lillylykho]

@marcysutton Unfortunately it is so.
Basically, I coped without it at the moment. But, really, it might be a good to add this option. Thanks.

[WillsB3]

@marcysutton What if you have an autocomplete in a modal?

In this case you need the autocomplete suggestions UI to appear over the top (and to overflow outside of, the modal container, like a native select element would do). The suggestions popup should act like a native select in my opinion in that that UI that pops up should essentially be at the viewport level.

We have our own autocomplete directive in a real app which needed to be present in a modal and had the same problem. In my opinion the autocomplete should be using an interim element.

The current implementation restricts it's use unfortunately.

[robertmesserle]

@lillylykho @WillsB3 @marcysutton This is a valid point and one that I had planned to implement after the initial release. I was hoping to find a cleaner workaround, but it unfortunately seeming that I will have to update the dropdown portion of md-autocomplete to append to the body.

[WillsB3]

@robertmesserle My concern is that there are several components which are going to have to same issue, e.g. Datepickers for one (and I'm positive there are/will be others (menus might be another example).

I was wondering if it might be beneficial to find a generic way to allow existing components to be rendered inside of some sort of "floating element" which could then be attached to the body? I'm not fully aware of the intricacies of how the $interimElement service works but know it's used in some components such as toasts, so perhaps $interimElement is suitable for this or perhaps not?

I've been working on a directive like this that acts as a sort of "portal" in that it allows components to be exist at the body level but be declared inline with the context of a controller/view so that the components still have access to the correct scope. However my implementation is pretty experimental and I'm sure there's a lot that could be improved. Do you or anyone else on the Angular Material team thing such a directive would be useful for the library in light of my concerns mentioned above?

[robertmesserle]

@WillsB3 It would definitely be beneficial, and I will likely implement something like that as I continue work on md-autocomplete.

[ThomasBurleson]

Also notice this implementation of autoComplete in inbox.google.com:

The menu is below the toolbar.

[Avishaidev]

solution???