thoughtbot / administrate

A Rails engine that helps you put together a super-flexible admin dashboard.
http://administrate-demo.herokuapp.com
MIT License
5.87k stars 1.11k forks source link

Selectize removes the blank options from selects #2545

Open thebravoman opened 6 months ago

thebravoman commented 6 months ago

I have the model

class RssEntry < ApplicationRecord
  belongs_to :narrative, optional: true

In the dashboard I have

  ATTRIBUTE_TYPES = {
    ...
    narrative: Field::BelongsTo.with_options(include_blank: true),
    ...
  }.freeze

When the html page is delivered there is blank options (looking at the network tab and the response from the server)

<div class="field-unit__field">
  <select data-controller="select" name="rss_entry[narrative_id]" id="rss_entry_narrative_id">
    <option value="" label=" "></option>
    <option selected="selected" value="1">Narrative #1</option></select>
</div>

But then selectize is called in select_controller.js as

import { Controller } from "@hotwired/stimulus";
import $ from "jquery";

export default class extends Controller {
  connect() {
    $(this.element).selectize({});
  }
};

this changes the html element to

<form class="form" id="edit_rss_entry_2" action="/disi_client/rss_entries/2" accept-charset="UTF-8" method="post">
  <input type="hidden" name="_method" value="patch" autocomplete="off">
  <input type="hidden" name="authenticity_token" value="..." autocomplete="off">
  <fieldset class="">
    <div class="field-unit field-unit--belongs-to field-unit--optional">
      <div class="field-unit__label">
        <label for="rss_entry_narrative_id-selectized">Narrative</label>
      </div>
      <div class="field-unit__field">
        <select data-controller="select" name="rss_entry[narrative_id]" id="rss_entry_narrative_id" tabindex="-1" class="selectized" style="display: none;">
          <option value="1" selected="selected">Narrative #1-USR</option>
        </select>
        <div class="selectize-control single">
          <div class="selectize-input items full has-options has-items">
            <div class="item" data-value="1">Narrative #1-USR</div>
            <input type="select-one" autocomplete="off" tabindex="" id="rss_entry_narrative_id-selectized" style="width: 4px; opacity: 0; position: absolute; left: -10000px;">
          </div>
          <div class="selectize-dropdown single" style="display: none; visibility: visible; width: 704px; top: 36px; left: 0px;">
            <div class="selectize-dropdown-content">
              <div class="option selected" data-selectable="" data-value="1">Narrative #1-USR</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-actions">
    <input type="submit" name="commit" value="Update Rss entry" data-disable-with="Update Rss entry">
  </div>
</form>

There is no longer the blank option.

Not sure if the communication and options with selectize messed up or something else.

thebravoman commented 6 months ago

I added this logic to my pull request with the other bug. Should have created a new PR, but I am using both fixes from my main

https://github.com/thoughtbot/administrate/pull/2544