UPDATE: After digging further, I tried a regular bootstrap 4 dropdown, with the same result. The dropdown does not open. I believe this means it can't be a problem with the selectpicker class or the bootstrap-select dependency specifically. Also has the same issue when using ng-bootstrap dropdown.
UPDATE 2: Ngx-dropdown does work, and is the only dropdown I can find that still works, but it operates differently. I'm hoping that helps figure out why.
UPDATE 3: Have confirmed this is not just an issue while working in Chrome. Same issue in firefox and safari.
After upgrading to Angular 6, the bootstrap-select element no longer drops down unless I remove the class="selectpicker". The little dropdown arrow no longer shows up either.
I've tried downgrading the bootstrap selectpicker, upgrading to the latest version, checking if jquery is updated, making sure selectpicker has the dependencies and versions installed it needs (jquery greater than 1.8.1 I think)
It also does not work when trying to manually force a dropdown. (see below)
With class="selectpicker"
Without class="selectpicker"
Before updating to angular 6 and updating dependencies (pulled from production)
Problem shown with both bootstrap-select and regular bootstrap 4 dropdown.
Forcing a dropdown via button:
With ngx-select-dropdown working:
The code used for a given select picker:
<select class="selectpicker" ngDefaultControl name="selectTypes" (change)="onChangeTypes($event)" data-style="btn btn-danger btn-block"
title="Test Type">
<option *ngFor="let type of testTypes; index as i" [attr.data-index]="i" value=i>{{type}}</option>
</select>
The code for init and again on the refresh on data loading
setTimeout(function() {
if ($('.selectpicker').length !== 0) {
$('.selectpicker').selectpicker({
iconBase: 'ti',
tickIcon: 'ti-check'
});
}
$('.selectpicker').selectpicker('refresh');
}, 100);
Code for other dropdowns (regular dropdown, bootstrap 4 updated dropdown, ngx dropdown)
<div class="btn-group dropdown">
<button type="button" (click)="dropdownToggle()" class="btn btn-block btn-danger dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Regular bootstrap 4 dropdown
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="dropdown">
<a href="#" class="btn dropdown-toggle" data-toggle="dropdown">
Regular
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#paper">Action</a></li>
<li><a href="#paper">Another action</a></li>
<li><a href="#paper">Something else here</a></li>
<li class="divider"></li>
<li><a href="#paper">Separated link</a></li>
<li class="divider"></li>
<li><a href="#paper">One more separated link</a></li>
</ul>
</div>
<br/>
<ngx-select-dropdown class="selectpicker dropdown btn-group btn-block dropdown-toggle btn btn-info" [multiple]="true" [config]="{height: auto, search:false}"
[options]="['first', 'second', 'third']"></ngx-select-dropdown>
And finally, the package.json:
"dependencies": {
"@angular/animations": "^6.1.4",
"@angular/common": "^6.1.4",
"@angular/compiler": "6.1.1",
"@angular/core": "^6.1.4",
"@angular/forms": "^6.1.4",
"@angular/http": "^6.1.4",
"@angular/platform-browser": "^6.1.4",
"@angular/platform-browser-dynamic": "^6.1.4",
"@angular/platform-server": "^6.1.4",
"@angular/router": "^6.1.4",
"@ng-bootstrap/ng-bootstrap": "^3.0.0",
"@ngui/map": "0.30.3",
"@sendgrid/mail": "^6.3.1",
"@types/googlemaps": "3.30.11",
"angular2-datetimepicker": "^1.1.1",
"angularfire2": "^5.0.0-rc.3",
"bootstrap": "4.1.3",
"bootstrap-notify": "3.1.3",
"bootstrap-select": "1.13.1",
"bootstrap-switch": "3.3.4",
"chart.js": "^2.7.2",
"chart.piecelabel.js": "^0.15.0",
"chartist": "0.11.0",
"chartist-plugin-zoom": "0.4.1",
"chartjs-plugin-zoom": "0.6.4",
"core-js": "2.5.7",
"datatables": "1.10.18",
"datatables.net-bs": "1.10.19",
"datatables.net-responsive": "2.2.3",
"datatables.net-select": "^1.2.5",
"datatables.net-select-bs": "^1.2.5",
"easy-pie-chart": "2.1.7",
"enhanced-resolve": "^4.1.0",
"eonasdan-bootstrap-datetimepicker": "4.17.47",
"firebase": "^5.4.0",
"firebase-admin": "^6.0.0",
"firebase-functions": "^2.0.5",
"fullcalendar": "3.9.0",
"jasny-bootstrap": "3.1.3",
"jquery": "^3.3.1",
"ng-circle-progress": "^1.2.0",
"ng2-charts": "^1.6.0",
"nodemailer": "^4.6.7",
"nouislider": "11.1.0",
"npm": "^6.0.1",
"popper.js": "^1.14.3",
"rxjs": "^6.2.2",
"stripe": "^6.2.1",
"twitter-bootstrap-wizard": "^1.2.0",
"web-animations-js": "2.3.1",
"xlsx": "^0.13.4",
"zone.js": "0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.7.0",
"@angular/cli": "^6.1.5",
"@angular/compiler-cli": "6.1.1",
"@types/bootstrap": "4.1.2",
"@types/chartist": "0.9.42",
"@types/datatables.net-select": "^1.2.4",
"@types/jasmine": "2.8.8",
"@types/jquery": "3.3.6",
"@types/node": "10.7.1",
"codelyzer": "4.4.4",
"jasmine-core": "3.2.1",
"jasmine-spec-reporter": "4.2.1",
"karma": "3.0.0",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "1.0.1",
"karma-coverage-istanbul-reporter": "2.0.1",
"karma-jasmine": "1.1.2",
"karma-jasmine-html-reporter": "1.3.1",
"protractor": "5.4.0",
"ts-node": "7.0.1",
"tslint": "5.11.0",
"typescript": ">=2.7.2 <2.10"
},
I would really apprecaite any help figuring out how to fix the dropdown/selectpicker element. Ironically it is one of the single most used elements in our platform and none of them work after upgrading to angular 6.
