Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Selectize removes the blank options from selects #2545

Open
thebravoman opened this issue Mar 10, 2024 · 1 comment
Open

Selectize removes the blank options from selects #2545

thebravoman opened this issue Mar 10, 2024 · 1 comment
Labels
bug breakages in functionality that is implemented

Comments

@thebravoman
Copy link

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 thebravoman added the bug breakages in functionality that is implemented label Mar 10, 2024
@thebravoman
Copy link
Author

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

#2544

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug breakages in functionality that is implemented
Projects
None yet
Development

No branches or pull requests

1 participant