Dropdown Not Showing

[mtwallace]

So I've been spinning my tires trying to get this thing to work properly on our site. Everything is compiling with no errors, the input is showing up, and the predictions API calls are being mad and show a 200 status in the network tab, but no console error, no dropdown, no predictions, and I'm not sure why?

module

.
.
.
import { GooglePlaceModule } from "ngx-google-places-autocomplete"

@NgModule({
    declarations: [MicrositeComponent, TitleCasePipe, OrderByPipe, SpaceBetweenCommasPipe, FormatPhonePipe, FooterComponent, MicrositeComponentV2, ...QuestionTypeFactory.GetQuestionTypes(), ProjectRecapSidebar, LanderComponent, SetupComponent, GetStartedComponent, GetStartedComponentV2, TaskSpecificQuestionsComponent, CommonQuestionsComponent, FinalStepComponent, SearchComponent, SearchComponentV2, ProgressBarComponent, ProgressBarComponentV2, ExitGateComponent, BBBSideComponent, FacebookSideComponent, TermsDesktopComponent, QuestionComponent, QuestionDirective, PageScroller, OpenInNewWindowDirective, TextAreaComponent, TextComponent, AutofillWatchDirective, MyAutoPlayDirective, ModalDirective, CommonQuestionsComponentV2, TaskSpecificQuestionsComponentV2, LanderComponentV2, FinalStepComponentV2, FinalStepComponentV2AB, AddressStepComponent],
    imports: [BrowserModule, FormsModule, ReactiveFormsModule, micrositeRouting, TextMaskModule, GooglePlaceModule, AgmCoreModule.forRoot({
        apiKey: '[key]' 
    })],
    entryComponents: [...QuestionTypeFactory.GetQuestionTypes()],
    providers: [micrositeRoutingProviders, RouteCanActivateSession, TransitionAnimation],
    exports: [MicrositeComponent]
})
export class MicrositeModule {
    constructor() {
    }
}

HTML Script Import with properly setup api key
<script async src="https://maps.googleapis.com/maps/api/js?key=[key]&libraries=places&language=en"></script>

Component

import { Router, ActivatedRoute } from "@angular/router"
import { Component, OnInit, Inject, Compiler, ViewChild } from "@angular/core"
import { AppSettings } from "Models/AppSettings"
import { MicrositeVersion } from "Models/API/MicrositeVersion"
import { UserSessionStore } from "Store/UserSessionStore"
import { Lead } from "Models/Lead"

import { ZipCodeValidator } from 'Validators/zipcode-validator.directive'

import { MicrositeRouteData } from "Modules/Microsite/RouteData"
import { SlowRouter } from "Modules/Microsite/SlowRouter"
import { LeadService } from "Services/LeadService"
import { GTMService } from "Services/GTMService"
import { TrackingData } from "Models/Track"
import { PromiseTrackerService } from 'Services/PromiseTrackerService'
import { TransitionAnimation } from "Services/TransitionAnimation"
import { GooglePlaceDirective } from "ngx-google-places-autocomplete"
import { Address } from "ngx-google-places-autocomplete/objects/address"

@Component({
    moduleId: module.id,
    templateUrl: "AddressStep.tmpl.html"
})

export class AddressStepComponent implements OnInit {
    @ViewChild("placesRef") placesRef: GooglePlaceDirective;
    options = {
        componentRestrictions: {
            country: ["US"]
        }
    }
    sessionLead: Lead;
    state = '';
    private disableButton = false;

    constructor(
        private runtimeCompiler: Compiler,
        private router: Router,
        private route: ActivatedRoute,
        private userSessionStore: UserSessionStore,
        private leadService: LeadService,
        private gtmService: GTMService,
        private transitionAnimation: TransitionAnimation,
        private zipCodeValidator: ZipCodeValidator,
        private promiseTrackerService: PromiseTrackerService,
        private slowly: SlowRouter,
        @Inject("AppSettings") private appSettings: AppSettings,
        @Inject("MicrositeVersion") private micrositeVersion: MicrositeVersion,
        @Inject("TrackingData") private trackingData: TrackingData) {
    }

    ngOnInit() {
        this.sessionLead = this.userSessionStore.getSession(this.appSettings.MicrositeMetaData.SiteName);
        this.state = this.state == 'active' ? 'reactive' : 'active';
        const questionElement = document.getElementById('AddressStep');
        this.transitionAnimation.animateQuestion(questionElement, this.state);
    }

    handleAddressChange = (address: Address) => {
        console.log("update location here");
        console.log(address);
        //this.sessionLead.NextUrl = `/${MicrositeRouteData.Routes.GET_STARTED}/${MicrositeRouteData.Routes.FINAL_STEP_AB}`;
        //this.slowly.navigate([MicrositeRouteData.Routes.GET_STARTED, MicrositeRouteData.Routes.FINAL_STEP_AB]);
    }

    onSubmit = (formData: any) => {
        this.sessionLead.NextUrl = `/${MicrositeRouteData.Routes.GET_STARTED}/${MicrositeRouteData.Routes.FINAL_STEP_AB}`;
        this.slowly.navigate([MicrositeRouteData.Routes.GET_STARTED, MicrositeRouteData.Routes.FINAL_STEP_AB]);
    }
}

View

<div id="AddressStep" class="addressStep funnelStep" [ngClass]="{'scrollable': true}">
    <form>
        <input ngx-google-places-autocomplete [options]='options' #placesRef="ngx-places" (onAddressChange)="handleAddressChange($event)" />
        <div class="button-container">
            <div class="grid-container">
                <div class="grid-x grid-margin-x">
                    <div class="cell small-12 medium-10 medium-offset-1 large-8 large-offset-2">
                        <div class="button-row">
                            <div (click)="window.history.go(-1);" class="button secondary"><svg class="ChevronLeft"><use xlink:href="#MIC_ChevronLeft" /></svg> Back</div>
                            <button type="submit" [disabled]="disableButton" class="button">Next <svg class="ChevronRight"><use xlink:href="#MIC_ChevronRight" /></svg></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

[mtwallace]

I guess all I needed to do was submit the problem to be able to figure it out myself. The z-index needed to be set for it to show up.

[AzadCoder]

I guess all I needed to do was submit the problem to be able to figure it out myself. The z-index needed to be set for it to show up.

Can you share your Css codes? Which class should have z-index?

[mtwallace]

@AzadCoder - I set the z-index to 1000000 for .pac-container and it started working properly. The reason for me was because the form lives in a fixed (position: fixed;) element. If you pop open the element inspector and search for pac-container, you should see it towards the bottom if your plugin is working.

[AzadCoder]

@AzadCoder - I set the z-index to 1000000 for .pac-container and it started working properly. The reason for me was because the form lives in a fixed (position: fixed;) element. If you pop open the element inspector and search for pac-container, you should see it towards the bottom if your plugin is working.

Thanks for the quick replay. Actually yeah I found that class and set the z-index but not worked. I'm using it inside of a Bootstrap modal.

[mtwallace]

@AzadCoder - if you don’t have any console errors and you can see the pac-container element in the DOM, I’m not exactly sure what’s going on in your case. Maybe try increasing the z-index further to make sure it’s not the issue. I’d just do it in the browser dev tools and make sure it’s higher than your modal z-index if you haven’t already. Worst case scenario, can you setup an angular code sandbox and share it?