Empty Select2 problem with Internet Explorer

brendons

Just wondering if this issue has been solved by others?

My page has three select2 fields which are populated by options in the datasource. If I edit a record with Chrome it all works as it should.

If I open the app in IE11 and edit a record in Editor, any select2 field that has a non zero value in the database shows the correct value and works as expected, however, any empty (zero in the db) select2 fields have a bogus value in them. This value is being supplied by the select2 options even though nothing has been selected. This "auto-selected" value is neither the first or last from the options but is from the middle of the set (id=1229). The underlying field value in the database is zero.
If the user updates the record at this point, the incorrect value is written to the db.

This doesn't happen in chrome. In chrome the empty select2 fields stay empty.
Any clues or work-arounds for IE with this problem?

brendons

Further to this, the problem goes away if I have an option of zero in the select list.
It is not enough to specify the placeholder in the opts like this:

placeholder: {id: "0", text: "Select a Parent"},

We must also have a zero option for select2 to select.
In my case, I am populating the select2 via options in the datasource:

Field::inst( 'est.Guardian1ID' )
                ->options( Options::inst()
                        ->table('enrollment_guardians')
                        ->value('ID')
                        ->label(array('GuardianFirstName', 'GuardianLastName'))
                )
                ->getFormatter( 'Format::ifEmpty', 0 )
                ->setFormatter( 'Format::ifEmpty', 0 ),

I am directly calling the records from a mysql table (enrollment_guardians) which has an auto-increment on the ID column. I really don't want to add a record with an ID=0 in that table.

Is there a way to add a zero option

(quasi code) $option.text(placeholder.text).val(0);

to the editor select2 plugin?

Thanks in advance and I apologise if this has been answered before. Searching for 'select2' in the editor forum returns over 9000 hits - too many to trawl through.
Perhaps the forum search should be improved and sorted by date so I could filter out the legacy and select2 version <4.0 posts.

brendons

I tried to add a zero option but it doesn't render.

label: 'Guardian 1:',
name: 'est.Guardian1ID',
type: 'select2',
"options": {"text": "Select a Parent", "id": "0"},  // also tried label for text and value for id
opts: {
minimumInputLength: 2,
placeholder: {id: "0", text: "Select a Parent"},
allowClear: true
}

allan

What happens if you use just the select field type? Select2 (as I understand it) is basically designed to be an enhanced version of the select tag, so the starting point would be to make sure that we can use a regular select field.

Forum search: It does rank by time to some extent, but I agree, having an option to just do a sort by date would be useful. Thanks for the suggestion!

Allan

brendons

Thanks for the reply Allan.
I tried your suggestion and changed the field type from select2 to select but it gives the same results (the select2 plugin was still in place - not sure if that would make any difference?).

It seems that setting the options in the datasource causes any object or array options added in the editor field definition to be ignored.
If I remove the datasource options and write out an array of options in the field definition (including a zero option) then it works as per the select documentation.

To prove the point I restored my original code and added a zero record to the mySQL table that is used as the datasource options and this solved the problem. I would rather not do that to the production database though so I will keep looking for another solution.

It would be great if any field options specified could be 'mixed into' the datasource options, or if the datasource options had provision for a 'placeholder' option.

allan

the select2 plugin was still in place - not sure if that would make any difference?)

No. And good - if the result is the same, let's debug the non-select2 version first as it will make the debugging process significantly easier.

Are you able to give me a link to a page showing the issue please?

Allan

brendons

I will send the links to your private email Allan.

brendons

Hi again Allan, adding the placeholder: ' ' into the field definition definitely works for the select field type.
Buoyed by this success I reverted my field type to select2 but I am back to my original problem - in a select2 field type, Chrome shows the placeholder but IE11 does not. IE and FF pick the first entry in the list.
My field definition now looks like this:

{
        label: 'Guardian 2:',
        name: 'est.Guardian2ID',
        type: 'select2',
    placeholder: ' ',
    placeholderValue: 0,
        opts: {
            minimumInputLength: 2,
            placeholder: {id: '0', text: 'Select a Parent'},
            allowClear: true
        }
}, 

(I also tried without placeholderValue and with quotes around 'id' and 'text').

Perhaps I should fallback to select or try selectize?

best
Brendon

allan

Hi Brendon,

Fantastic - good to hear that sorted out the select case.

For Select2, try:

opts: {
  placeholder: ' '
}

Allan

brendons

Adding opts: {placeholder: ' '} didn't fix it.
I noticed with this snippet:

opts: {
    placeholder: 'xyz',
    allowClear: true
}

on open, the control has the first entry selected. If I clear that entry, then I see my placeholder 'xyz'.

Also been looking at other forums and found a suggestion to prepend an empty option into the datasource:
``` .prepend('<option/>').val(function(){return $('[selected]',this).val() ;})

Talking through my hat perhaps, but could a prepend be added in the select2 plugin?

allan

The problem with that is that it isn't really a placeholder. Is 0 a valid value to be submitted? If so, that should be in the list of options that is being used to populate the select/select2 field.

It sounds like select2 in IE is doing something a bit odd when the value is not in the list of options that can be selected from!

Allan