Open
Description
I have the model
class RssEntry < ApplicationRecord
belongs_to :narrative, optional: true
In the dasard 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="" 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.