Angular Autocomplete Scroll Issue In Angular Dialog Component Stackblitz

Angular Autocomplete Scroll Issue In Angular Dialog Component Stackblitz Fork from angular material dialog component to implement scroll strategy of angular autocomplete component. A temporary workaround would be to close the autocomplete when you scroll the dialog content for some reason i can't fork the stackblitz you shared but here is how you could accomplish this:.

Make It Easy Create Angular Autocomplete Angular 2 5 As shown in the stackblitz, i'm facing an issue with angular material autocomplete control in which the control stays opened on external events like page scroll as shown in the attached sample and the issues even occurs in the angular material demo site. Import {browsermodule} from '@angular platform browser'; import {platformbrowserdynamic} from '@angular platform browser dynamic'; import {browseranimationsmodule} from '@angular platform browser animations'; import {demomaterialmodule} from '. material module'; import {mat autocomplete scroll strategy} from '@angular. But the current behavior is drop down list is sticky to position on the screen, it will not follow the input element position when scrolling. the solution is using scrolldispachmodule. Import { component } from '@angular core'; @component( { selector: 'my app', templateurl: '. app ponent ', styleurls: [ '. app ponent.css' ].

Angular Autocomplete Virtual Scroll Stackblitz But the current behavior is drop down list is sticky to position on the screen, it will not follow the input element position when scrolling. the solution is using scrolldispachmodule. Import { component } from '@angular core'; @component( { selector: 'my app', templateurl: '. app ponent ', styleurls: [ '. app ponent.css' ]. Basic autocomplete uses ngmodel for two way binding, requires a list of suggestions and a completemethod to query for the results. the completemethod gets the query text as event.query property and should update the suggestions with the search results. Click on the 'open popup' button and scroll the dialog section. i think the ideal solution would be to disable scroll when the dropdown is opened as suggested by @karankang007 in comment. Import { component, version, viewchild } from "@angular core"; import { formcontrol } from "@angular forms"; import { httpclient } from "@angular common http";. Import {autocompleteautoactivefirstoptionexample} from '. deprecation in version 10. the same in stackblitz as on the docs site. compiling application & starting dev server….