selectize - generated markup does not have the pass on attributes like name= to generated <input>

[bhantol]

There are all sorts of things not desirable the way the HTML is generated with respect to the how it generates the element.

• Placeholders are chopped off when I use selectize inside form-horizontal container-fluid This particular one may be a defect in the underlying selectize component. however the defect may be that the style and other attributes like name etc are not passed to the generated markup. See next point.
• It overrides width style I pass through e.g. width: 100%; becomes width: 77px; it calculates in my case 77px which is not enough to show the place holder.
• It generates an element and does not pass the attribute name=. Although I see the ng-valid etc classes on the selectize element the form is firing validation for formField that is undefined.
• Using selectize on <input> element still leaves the element hanging there with merely display: none; which messes up validations.

Using selectize as an element

       <selectize class="form-control dropdown input-medium" 
                       name="selectSomethingImportant"
                       ng-model="data.selectedItems" 
                       config="myConfig" 
                       options="availableOptions" 
                       placeholder="Select something value="">
       </selectize>

Using selectize as an attribute

       <input     class="form-control dropdown input-medium" 
                       name="selectSomethingImportant"
                       ng-model="data.selectedItems" 
                       config="myConfig" 
                       options="availableOptions" 
                       placeholder="Select something value="" selectize>
       </input>

This generates following markup at runtime when targeted as element selectize (vs attribute)

    <selectize tabindex="-1" 
               class="form-control dropdown input-medium ng-pristine ng-untouched ng-valid ng-isolate-scope selectized ng-valid-required" 
               name="selectSomethingImportant"
               style="line-height: inherit; display: none;"
               ng-model="data.selectedItems" 
               config="myConfig" 
               options="availableOptions" 
               placeholder="Select something value="">
    </selectize>
    <div class="selectize-control form-control dropdown input-medium ng-pristine ng-untouched ng-valid ng-isolate-scope single">
        <div class="selectize-input items not-full ng-valid ng-pristine has-options">
            <input  tabindex="0" style="left: 0px; width: 77px; position: relative; opacity: 1;" 
                    type="text" 
                    placeholder="Select Reason" 
                    autocomplete="off">
        </div>
        <div class="selectize-dropdown single form-control dropdown input-medium ng-pristine ng-untouched ng-valid ng-isolate-scope" 
             style="left: 0px; top: 34px; width: 795px; display: none; visibility: visible;">
             <div class="selectize-dropdown-content">
              <div class="option" data-value="42" data-selectable="">Option 1</div>
              <div class="option" data-value="31" data-selectable="">Option 2</div>
              <div class="option" data-value="28" data-selectable="">Option 3</div>
             </div>
        </div>
    </div>

[PhiLhoSoft]

Most of these remarks should be issues on the Selectize control (which isn't much maintained nowadays). Particularly the issue with the placeholder, which has already an issue on the Selectize project: https://github.com/selectize/selectize.js/issues/851