Question

我正在使用Angular编写应用程序，并注意到一个奇怪的错误。我有一个搜索栏，其中包含建议下拉列表。在IE中，当您尝试使用滚动条（单击并按住）时，单击滚动条将关闭菜单。

这在Chrome，Edge和Firefox上正常运行。

report.component.ts

import { Component, NgModule, ElementRef, ViewEncapsulation, ViewChild } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import Appmodels = require("../../models/app.models");
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { DataEndpoints } from '../../app.configs.shared';
import { Ng2AutoCompleteModule } from 'ng2-auto-complete';
import { Router } from '@angular/router';
import Report = Appmodels.Report;

import { AlertService } from '../../services/alert.service';
import { ReportDataService } from '../../services/reports.dataservice';
import { AttributionSearch } from '../../models/app.models';
import { SearchHistory } from '../../models/app.models';

@Component({
    selector: 'report',
    templateUrl: './report.component.html',
    styleUrls: ['./report.component.css']
})
export class ReportComponent {
    reporturl: string;
    Number = Number;
    private serviceURL: string;
    private navigateurl: string;
    private id: string;
    private manCode: string;
    private manSearch: boolean=false;
    private man: string[];
    private assetClassSelected: string;
    private assetSubClassSelected: string;
    private reportSelected: string;
    private addedHistory: boolean=false;
    searchData: AttrSearch;
    searchHistory: SearchHistory;    

    constructor(private router: Router, private route: ActivatedRoute, private http: Http, private dataEndPoints: DataEndpoints
        , private reportDS: ReportDataService, protected alertService: AlertService) {

        this.route.params.subscribe(
            params => {
                this.initializeComponent();
            } 
            ,
            err => {
                this.alertService.error(`${this.alertService.errorMsg}${this.alertService.newLine}${(err.message as string)}`);
                throw new Error(err);
            },
            () => { console.log("ReportComponent - call successful") });
    }

    private initializeComponent() {
        this.searchData = new AttributionSearch();
        this.searchHistory = new SearchHistory();
        this.reporturl = "";
        this.id = this.route.snapshot.params['id'];
        this.searchData.manCode = this.route.snapshot.params['manCode'];

        this.searchHistory.reportId = this.route.snapshot.params['id'];
        this.searchHistory.maneCode = this.route.snapshot.params['manCode'];

        this.reportDS.getReportById(this.id).subscribe(result => {
            var rpt = result as Report;
            this.assetClassSelected = rpt.assetClass;
            this.assetSubClassSelected = rpt.assetSubClass;
            this.reportSelected = rpt.name;
            this.manSearch = rpt.manSearch;
            this.navigateurl = rpt.url;

            if (this.manSearch && this.searchData.manCode != "")
                this.reporturl = rpt.url + '&SearchMan=' + this.setManCode(this.manCode);

            if (this.manSearch == false) {
                this.reporturl = rpt.url;
                this.setReportUsageHistory(false);
            }
            }
            , err => {
                this.alertService.error(`${this.alertService.errorMsg}${this.alertService.newLine}${(err.message as string)}`);
                throw new Error(err);
            }
            ,
            () => { console.log("TableauVizComponent - call successful") });

            this.reportDS.getManSearchService(parseInt(this.id)).subscribe(result => {
            this.man = result as string[];
            }
            , err => {
                this.alertService.error(`${this.alertService.errorMsg}${this.alertService.newLine}${(err as string)}`);
                throw new Error(err);
            }
            ,
            () => { console.log("ReportComponent - GetMan - call successful") });        
    }

    private onSearch(event) {
        this.router.navigate(['/report', { id: this.id, manCode: this.searchData.manCode }]); 
    }

        private onValueChanged(value) {

            var valueStr = value as string;

            if (valueStr !== "") {
                this.searchData.manCode = value.replace("..", "");
                this.searchHistory.manCode = this.setManCode(value);
                this.searchHistory.reportId = this.id;
                this.reporturl = "";

                if (this.manSearch && this.searchHistory.manCode != "")
                    this.reporturl = this.navigateurl + '&SearchMan=' + this.setManCode(this.searchHistory.manCode);

                if (this.manSearch == false)
                    this.reporturl = this.navigateurl;


                this.setReportUsageHistory(true);
            }
        }

        private setReportUsageHistory(navigate: boolean) {
            let headers = new Headers({ 'Content-Type': 'application/json' });
            let options = new RequestOptions({ headers: headers });

            this.http.post(this.dataEndPoints.AddReportManHistoryService, this.searchHistory, options).subscribe(result => {
                this.addedHistory = result.json() as boolean;

                if (navigate)
                    this.router.navigate(['/report', { id: this.id, manCode: this.searchData.manCode }]);
            }
                , err => {
                    this.alertService.error(`${this.alertService.errorMsg}${this.alertService.newLine}${(err as string)}`);
                    throw new Error(err);
                },
                () => { console.log("ReportComponent - onValueChanged (cancelled) - call successful") });
        }

        private setManCode(input) {
            var inputStr = input as string;
            var result = "";
            if (inputStr !== "") {
                result = input.substr(0, (inputStr.indexOf("-")));
            }
            return result;
        }
    }

Report.component.css

/*Report Maintenance header style*/
:host .navbar-brand-bold {
    font-size: 1.5rem;
    color: #002A5E;
    font-family: 'Circular TT Medium';
}

:host .input-group {
    line-height: 25px !important;
    padding-top: 0.5rem;
    padding-bottom: 1rem;
    font-size: 1.15rem;
    text-align: center;
    /*border: 1px solid #e9ebec;*/
}

:host /deep/ .form-control {
    padding: 0.25rem !important;
    font-size: 0.850rem;
    border-radius:unset;
}

:host /deep/ .label-control {
    line-height: 30px;
    padding-right: 0.25rem;
    font-size: 0.750rem;
    font-weight:700;    
    color: #0074B7;
    width:120px;
}

:host /deep/ .row {
    padding: 0.25rem !important;
}

:host /deep/ ng2-auto-complete {
    max-height: 400px;
    overflow-y: auto;
    font-size: 0.850rem;
    text-align: left;
    -ms-overflow-style: unset;
}

:host .input-panel {
    padding-top: 0.5rem;
    padding-bottom: 1rem;
    display: block;
    position: relative;
}

:host .input-panel:after {
    content: "\f078"; /* fa-chevron-down */
    font-family: 'FontAwesome';
    position: absolute;
    right: 0;
    font-size: 0.5rem;
}

:host ::-webkit-input-placeholder {
    color: lightgray;
}

:host ::-moz-placeholder {
    color: lightgray;
}

:host :-ms-input-placeholder {
    color: lightgray;
}

:host .input-panel[aria-expanded="true"]:after {
    content: "\f077"; /* fa-chevron-up */
}

report.component.html

<div class="container-fluid">
    <div class="input-panel" style="font-size: 1rem; color: #002A5E;font-weight: 600;" aria-hidden="true"
         data-toggle="collapse" data-target="#manSearch" aria-expanded="true" aria-controls="manSearch">
        Reports > {{this.assetClassSelected}} > {{this.assetSubClassSelected}} > {{this.reportSelected}}        
    </div>
    <div class="input-group collapse show" *ngIf="this.manSearch" id="manSearch">
        <span class="label-control" style="text-align:left">Man Search</span>
        <div ng2-auto-complete
             id="divManList"
             [source]="man"
             (valueChanged)="onValueChanged($event)"
             min-chars="0"
             max-num-list="100">
            <input [(ngModel)]="searchData.manCode" placeholder="Enter man code or name" class="form-control" style="width:500px;" maxlength="25" />
        </div>
        <button  type="button" class="fa fa-get-pocket" aria-hidden="true" style="display:inline;line-height: 25px;padding:0rem 0.10rem 0rem 0.10rem;visibility:hidden;" value="Search" (click)="onSearch($event)"></button>
    </div>
    <tableau-viz [reporturl]="reporturl"></tableau-viz>    
</div>

dropdown

任何帮助都会很棒，因为这真的很烦

更新：

奇怪的是，如果我添加20px填充，然后打开开发工具，它就可以工作。当我阅读这与IE的细微差别时，我添加了20px

Internet Explorer-滚动条+菜单在单击时关闭

0 个答案: