add script that forces width on select2 placeholder

Author: pxpm

src/resources/views/crud/inc/show_tabbed_fields.blade.php

@@ -7,23 +7,6 @@
     }
 @endphp
 
-@push('crud_fields_styles')
-    <style>
-        .nav-tabs-custom {
-            box-shadow: none;
-        }
-        .nav-tabs-custom > .nav-tabs.nav-stacked > li {
-            margin-right: 0;
-        }
-
-        .tab-pane .form-group h1:first-child,
-        .tab-pane .form-group h2:first-child,
-        .tab-pane .form-group h3:first-child {
-            margin-top: 0;
-        }
-    </style>
-@endpush
-
 @if ($crud->getFieldsWithoutATab()->filter(function ($value, $key) { return $value['type'] != 'hidden'; })->count())
 <div class="card">
     <div class="card-body row">
@@ -66,3 +49,32 @@ class="nav-link {{ isset($tabWithError) ? ($tab == $tabWithError ? 'active' : ''
     </div>
 </div>
 
+@push('crud_fields_styles')
+    <style>
+        .nav-tabs-custom {
+            box-shadow: none;
+        }
+        .nav-tabs-custom > .nav-tabs.nav-stacked > li {
+            margin-right: 0;
+        }
+
+        .tab-pane .form-group h1:first-child,
+        .tab-pane .form-group h2:first-child,
+        .tab-pane .form-group h3:first-child {
+            margin-top: 0;
+        }
+    </style>
+@endpush
+
+@push('crud_fields_scripts')
+    <script>
+        // when select2 is multiple and it's not on the first displayed tab the placeholder would
+        // not display correctly because the element was not "visible" on the page (hidden by tab)
+        // thus getting `0px` width. This makes sure that the placeholder element is always 100% width
+        $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
+            $('.select2-search .select2-search--inline').css('width', '100%');
+            $('.select2-search__field').css('width', '100%');
+        })
+    </script>
+@endpush
+