Replace bootstrap combobox with select2

package.json

@@ -13,7 +13,6 @@
   "dependencies": {
     "@coreui/coreui": "^2.1.12",
     "@coreui/icons": "^0.3.0",
-    "@danielfarrell/bootstrap-combobox": "^1.1.8",
     "bootstrap": "^4.3.1",
     "bootstrap-sweetalert": "^1.0.1",
     "cross-env": "^5.2.0",

public/mix-manifest.json

@@ -9,8 +9,7 @@
     "/vendors/js/perfect-scrollbar.min.js": "/vendors/js/perfect-scrollbar.min.js?id=4a10bcfa0a9c9fa9d503",
     "/vendors/css/select2.min.css": "/vendors/css/select2.min.css?id=8e44c39add2364bdb469",
     "/vendors/js/select2.min.js": "/vendors/js/select2.min.js?id=0a96cf2d3a193019a91b",
-    "/vendors/css/bootstrap-combobox.css": "/vendors/css/bootstrap-combobox.css?id=f6a6add416aca5e75f21",
+    "/vendors/css/select2-bootstrap4.css": "/vendors/css/select2-bootstrap4.css?id=85167d868d2bf2dc5603",
-    "/vendors/js/bootstrap-combobox.js": "/vendors/js/bootstrap-combobox.js?id=36f9331a05f0b943b74c",
     "/vendors/css/dropzone.min.css": "/vendors/css/dropzone.min.css?id=2f735dbf472afcd77604",
     "/vendors/css/dropzone-basic.min.css": "/vendors/css/dropzone-basic.min.css?id=960bcd6d5cb8351ac0d0",
     "/vendors/js/dropzone.min.js": "/vendors/js/dropzone.min.js?id=33148c7d5e055ea74714",

resources/views/portal/default/invoices/index.blade.php

@@ -20,7 +20,7 @@
                         <select class="form-control" style="width: 220px;" id="statuses" name="client_status[]" multiple="multiple">
                               <option value="paid">{{ ctrans('texts.status_paid') }}</option>
                               <option value="unpaid">{{ ctrans('texts.status_unpaid') }}</option>
-                            </select>
+                        </select>
 
                     </div>
 

resources/views/portal/default/layouts/master.blade.php

@@ -42,6 +42,8 @@
   <!-- Main styles for this application-->
   <link href="/vendors/css/bootstrap.min.css" rel="stylesheet">
   <link href="/vendors/css/coreui.min.css" rel="stylesheet">
+  @stack('css')
+
     @yield('head')
 </head>
 @include('portal.default.header')

resources/views/portal/default/profile/index.blade.php

@@ -1,8 +1,16 @@
 @extends('portal.default.layouts.master')
-@section('header')
+@push('css')
-    @parent
+    <link href="/vendors/css/select2.min.css" rel="stylesheet">
-    <link href="/vendors/css/bootstrap-combobox.css" rel="stylesheet">
+    <link href="/vendors/css/select2-bootstrap4.css" rel="stylesheet">
-@stop
+    <style>    
+      select {border: 1px solid  !important;}
+      .select2-container--bootstrap4 .select2-selection--single 
+      {
+        border: 1px solid #e4e7ea !important;
+      }
+
+    </style>
+@endpush
 @section('body')
     <main class="main">
         <div class="container-fluid">
@@ -57,12 +65,15 @@
                         {!! Former::text('state')->placeholder( ctrans('texts.state'))->label('') !!}
                         {!! Former::text('postal_code')->placeholder( ctrans('texts.postal_code'))->label('') !!}
 
+
                         {!! Former::select('country_id')
                             ->addOption('','')
                             ->autocomplete('off')
                             ->label('')
                             ->fromQuery($countries, 'name', 'id') !!}
 
+                
+
                         {!! Former::text('shipping_address1')->placeholder( ctrans('texts.shipping_address1'))->label('') !!}
                         {!! Former::text('shipping_address2')->placeholder( ctrans('texts.shipping_address2'))->label('') !!}
                         {!! Former::text('shipping_city')->placeholder( ctrans('texts.shipping_city'))->label('') !!}
@@ -115,22 +126,35 @@
 </body>
 @endsection
 @push('scripts')
-    <script src="/vendors/js/bootstrap-combobox.js"></script>
+    <script src="/vendors/js/select2.min.js"></script>
 @endpush
 
 @section('footer')
 
 <script>
 
-$(function() {
-    $('#country_id, #shipping_country_id').combobox();
-
-    });
 
 $(document).ready(function() {
 
-});  
+  $('#shipping_country_id').select2({
+    placeholder: "{{ ctrans('texts.country') }}",
+    //allowClear: true,
+    theme: "bootstrap4",
+}).on('change', function() {
+    
+});
 
+
+  $('#country_id').each(function () {
+    $(this).select2({
+      placeholder: "{{ ctrans('texts.country') }}",
+      theme: 'bootstrap4',
+      width: 'style',
+      allowClear: Boolean($(this).data('allow-clear')),
+    });
+  });
+
+});
 </script>
 
 @endsection

webpack.mix.js

@@ -25,8 +25,7 @@ mix.copyDirectory('node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js'
 mix.copyDirectory('node_modules/select2/dist/css/select2.min.css', 'public/vendors/css/select2.min.css');
 mix.copyDirectory('node_modules/select2/dist/js/select2.full.min.js', 'public/vendors/js/select2.min.js');
 
-mix.copyDirectory('node_modules/@danielfarrell/bootstrap-combobox/css/bootstrap-combobox.css', 'public/vendors/css/bootstrap-combobox.css');
+mix.copyDirectory('node_modules/@ttskch/select2-bootstrap4-theme/dist/select2-bootstrap4.min.css', 'public/vendors/css/select2-bootstrap4.css');
-mix.copyDirectory('node_modules/@danielfarrell/bootstrap-combobox/js/bootstrap-combobox.js', 'public/vendors/js/bootstrap-combobox.js');
 
 mix.copyDirectory('node_modules/dropzone/dist/min/dropzone.min.css', 'public/vendors/css/dropzone.min.css');
 mix.copyDirectory('node_modules/dropzone/dist/min/basic.min.css', 'public/vendors/css/dropzone-basic.min.css');