when given optionsGroups tailselect automatically selects some random option

[boxxxie]

in my example HTML i want tail to use the placeholder on init (no options are selected)

tails instead selects "Development" option

i have to use this workaround to fix it

  let tails = tail.select(element, tail_select_options);
  if (selection.length === 0){
    tails.updateLabel(placeholder || "Choose an Option")
    const selected_options = tails.options.selected
    selected_options.forEach(opt => tails.options.unselect(opt)) // deselect any selected options
  }

example HTML:

<select tail-select
        name="project[project/project-stage]"
        data-class-names="ui fluid"
        data-placeholder="Choose an Option"
        up-data='{{project.project/project-stage|json}}' >

    <optgroup label="Real Estate">

        <option  value="project-stage.type/development">
            Development
        </option>

        <option  value="project-stage.type/acquisition">
            Acquisition
        </option>

        <option  value="project-stage.type/stabilized">
            Stabilized
        </option>

    </optgroup>

    <optgroup label="Equity VC Start-ups">

        <option  value="project-stage.type/pre-seed">
            Pre-Seed
        </option>

        <option  value="project-stage.type/seed">
            Seed
        </option>

        <option  value="project-stage.type/early-stage">
            Early Stage
        </option>

        <option  value="project-stage.type/mid-stage">
            Mid Stage
        </option>

        <option  value="project-stage.type/late-stage">
            Late Stage
        </option>

    </optgroup>
</select>

got any idea where i should start investigating to make a PR?

[wolffe]

I have the same issue. If you can find where this happens and submit a PR to fix it, that would be great.

[nicksuazo]

Removing my previous comment as this was the same issue I had.

[nicksuazo]

ANOTHER WORKAROUND

I tried to debug your code but I can't really find where it assigned the selected attribute to each option. I tried changing all option to false but nothing happens.

However, I may have found another work around for this issue. To make a placeholder, put something like this

{key: null, value: 'Select Account Code ...', disabled: true, selected: true}

EXAMPLE:

tail.select(`.item_row select`, {
    search: true,
    searchFocus: true,
    placeholder: 'Choose Item ...',
    descriptions: true,
    searchConfig: ['text', 'value', 'attributes'],
    items: [{key: null, value: 'Select Account Code ...', disabled: true, selected: true}, { ... }, { ... }]
    }))
})

[boxxxie]

i'll try out this workaround. i am suspicious as to it's behaviour with my server. however it's a lot cleaner than my solution of digging into random data and changing it.