Сейчас я работаю над проектом Angular, и в этом проекте есть страница с 2 mat-autocomplete компонентами, один для выбора страны, а другой для выбора штата. Штатный работает нормально со всем, что находится в ожидаемых местах, как показано здесь:
И проверка элементов показывает свойства, которые имеют смысл. Для div с именем класса cdk-overlay-pane (выделено в pi c) width равно 350px и top, а также left будут динамически изменяться, чтобы оно всегда отображалось прямо над или под соответствующим input элемент.
А вот соответствующий код HTML:
<div class="p-10" fxFlex.gt-md="100" fxFlex.gt-xs="100" fxFlex="100" [hidden]="!showStateDropdown">
<div class="spec-form-field drop-down" matAutocompleteOrigin #stateOrigin="matAutocompleteOrigin">
<mat-form-field>
<input type="text" #stateInput [formControl]="form.controls['state']" placeholder="{{ 'account_section.state' | translate }}" matInput [matAutocomplete]="state" (keyup)="isSelectedState = false; _filterSearch('state');" (blur)="removeUnusableValue();" (focus)="_filterSearch('state');"
[matAutocompleteConnectedTo]="stateOrigin">
<i class="material-icons">arrow_drop_down</i>
</mat-form-field>
<mat-autocomplete #state="matAutocomplete" (optionSelected)="isSelectedState = true;" (blur)="updateAccountData()">
<mat-option *ngFor="let state of states" [value]="state.iso">
{{ state.name }}
</mat-option>
</mat-autocomplete>
</div>
</div>
Однако, когда все становится странным речь идет о mat-autocomplete для страны. Раскрывающийся список всегда будет отображаться в верхнем левом углу окна (в браузере).
А когда я проверяю элементы, * Свойства 1034 *, top и left для cdk-overlay-pane всегда установлены на 0px.
Однако я не могу чтобы найти реальные различия между тем для страны и тем для государства, за исключением того, что все, что говорит «государство», заменяется на «страна» в том, что для страны. Вот код HTML:
<div class="p-10" fxFlex.gt-md="100" fxFlex.gt-xs="100" fxFlex="100">
<div class="spec-form-field drop-down" matAutocompleteOrigin #countryOrigin="matAutocompleteOrigin">
<mat-form-field>
<input type="text" #countryInput [formControl]="form.controls['country']" placeholder="{{ 'account_section.country' | translate }}" matInput [matAutocomplete]="country" (keyup)="checkKeycode($event.keyCode,'country');" (blur)="removeUnusableValue();" (focus)="_filterSearch('country');"
[matAutocompleteConnectedTo]="countryOrigin">
<i class="material-icons">arrow_drop_down</i>
</mat-form-field>
<mat-autocomplete #country="matAutocomplete" (optionSelected)="changeCountry()" (blur)="updateAccountData()">
<mat-option *ngFor="let country of countries" [value]="country.iso">
{{ country.name }}
</mat-option>
</mat-autocomplete>
</div>
</div>
Я, честно говоря, понятия не имею, почему в стране не работает должным образом. Все выглядит хорошо, но конечный результат - нет.
Вот номера версий компонентов и модулей, используемых в этом проекте на тот случай, если кто-то захочет взглянуть.
Любая помощь приветствуется.