October: taglist odd behavior on remove first value

[mberizzo]

Expected behavior

Add and remove values without problems

Actual behavior

You can add coma separeted values without problems but if you want to delete the first value, you can't because when input field lose focus, the first value reappear. Only happend with first value and when you are updating

Reproduce steps

1. In your fields.yaml create a field with type=taglist
2. Add diferents values. ie: val1, val2, val3, val4
3. Click Save button
4. Click to edit
5. Delete val1 (click "x")
6. Click "Save" (now the val1 reappear)

October build

434

[LukeTowers]

Can you attach a GIF of this happening along with the list of fields used to recreate it?

[mberizzo]

fields.yaml

tabs:
    fields:
        name:
            label: 'mberizzo.beers::lang.field.name'
            span: auto
            type: text
            tab: 'mberizzo.beers::lang.tab.details'
        category:
            label: 'mberizzo.beers::lang.field.category'
            nameFrom: name
            descriptionFrom: description
            span: auto
            type: relation
            tab: 'mberizzo.beers::lang.tab.details'
        description:
            label: 'mberizzo.beers::lang.field.description'
            size: small
            span: full
            type: textarea
            tab: 'mberizzo.beers::lang.tab.details'
        properties:
            label: 'mberizzo.beers::lang.field.properties'
            span: full
            type: taglist
            tab: 'mberizzo.beers::lang.tab.features'
        specs:
            label: 'mberizzo.beers::lang.field.specs'
            prompt: 'backend::lang.form.add'
            span: full
            containerAttributes: {  }
            type: repeater
            maxItems: 4
            tab: 'mberizzo.beers::lang.tab.features'
            form:
                fields:
                    name:
                        label: 'mberizzo.beers::lang.field.name'
                        span: left
                        type: text
                        comment: 'mberizzo.beers::lang.misc.spects.name_comment'
                    value:
                        label: 'mberizzo.beers::lang.field.value'
                        span: right
                        type: text
                        comment: 'mberizzo.beers::lang.misc.spects.hops_comment'
        launch_date:
            label: 'mberizzo.beers::lang.field.launch_date'
            mode: date
            span: auto
            type: datepicker
            tab: 'mberizzo.beers::lang.tab.config'
            ignoreTimezone: true
        is_featured:
            label: 'mberizzo.beers::lang.field.is_featured'
            span: left
            type: switch
            tab: 'mberizzo.beers::lang.tab.config'
        is_active:
            label: 'mberizzo.beers::lang.field.is_active'
            span: left
            default: 1
            type: switch
            tab: 'mberizzo.beers::lang.tab.config'
secondary_tabs:
    fields:
        logo:
            label: 'mberizzo.beers::lang.field.logo'
            mode: file
            type: fileupload
        image:
            label: 'mberizzo.beers::lang.field.image'
            mode: image
            type: fileupload

[LukeTowers]

@mberizzo thanks for the GIF! That's a very odd behaviour, were you able to dig into the JS and see what's causing that to occur?

[mberizzo]

Still not, Luke. In these days i will work on it

[LukeTowers]

Thanks

[w20k]

Tried to reproduce it and could not :)

[petehalverson]

Confirmed. I setup a test on OctoDock

Playground > Pages > Complex Page

Click the SEO tab and try to remove OctoberCMS

[LukeTowers]

@w20k could you take a look? ^

[w20k]

@LukeTowers on it! Might be a select2 bug...hm :)

[github-actions[bot]]

This issue will be closed and archived in 3 days, as there has been no activity in the last 30 days. If this issue is still relevant or you would like to see action on it, please respond and we will get the ball rolling.

[ghost]

A customer reported the same issues as mentioned above by @mberizzo

I have found the bug with not removing the first "tag". Its not a select2 "bug" but a october cms bug. The bug only appears when you don't have any field options in your tag list.

If you add the field, options to your taglist field you will see that you can now remove the first option.

```emailaddresses:
label: E-mailadres
type: taglist
options:

• [email protected]

Its caused by the option `select-no-dropdown` (class) in select.js file. 

https://github.com/octobercms/october/blob/master/modules/system/assets/ui/js/select.js#L120

```javascript
/*
                 * When the dropdown is hidden, force the first option to be selected always.
                 */
                if ($element.hasClass('select-no-dropdown')) {
                    extraOptions.selectOnClose = true
                    extraOptions.closeOnSelect = false

                    $element.on('select2:closing', function() {
                        $('.select2-dropdown.select-no-dropdown:first .select2-results__option--highlighted').removeClass('select2-results__option--highlighted')
                        $('.select2-dropdown.select-no-dropdown:first .select2-results__option:first').addClass('select2-results__option--highlighted')
                    })
                }

[LukeTowers]

@joris-vdlp are you able to submit a PR to fix the issue?

[daftspunk]

Fixed by outcome of #4867