Selectize.js - Adding placeholder option breaks the input [solved I guess]

default

This is the default look of my select input. When I try to add a default "selected disabled" option to it, it only shows the placeholder text but not the products. Like this ;

default

Here's my "working" code :

<label class="mb-3 ps-1">Select Product</label>
<select name="product_id" id="product_id" class="form-control" required>
   @foreach($products as $product)
       <option value="{{$product['id']}}">{{$product['name']}}</option>
   @endforeach
</select>

And this is the "broken" code :

<label class="mb-3 ps-1">Select Product</label>
<select name="product_id" id="product_id" class="form-control" required>
   <option value="">Select a product</option>
   @foreach($products as $product)
      <option value="{{$product['id']}}">{{$product['name']}}</option>
   @endforeach
</select>

It's been weeks since I'm having this problem and I'm starting to hate selectize. Any other alternative suggestions to selectize will be very welcomed. I'm only gonna use it for search/autocomplete in my select inputs. No multi-select or anything.

motinska94

3 years ago

Level 3

In addition to that, weirdly this code works as expected on my customers' select box (they're both in the exact same page, just in different divs).

<select name="customer_id" id="customer_id" class="form-control">
   <option value="" selected disabled>Select a customer</option>
   @foreach($customers as $customer)
      <option value="{{$customer->id}}">{{$customer->name}}</option>
   @endforeach
</select>

Result : wtf

Both have the exact same code structure, right one works but left one doesn't what the actual...

No, I'm not giving any of them a different js attribute or anything, here's my script to use selectize

<script>
     $(function () {
         $("select").selectize();
     });
</script>

motinska94

3 years ago

Level 3

Oh I'll be damned. Looks like it was the "required" part that's messing selectize up. If you don't put a "required" on select input, you can show the placeholder just fine. But if you make it required, it doesn't show the list until you start typing. That's just disgusting.

Please or to participate in this conversation.