drop-down list WITHOUT a pre-selected option throws JS-Error in Chrome and IE11

[Robert]

When I build forms with drop down lists without and selected default an error occurs. Afterthat it is impossible to use the rest of the form.

put the example code in the full featured editor in source mode an than switch to normal mode:

​http://ckeditor.com/demo#full

<select>
	<option value="test1">Test1</option>
	<option value="test2">Test2</option>
	<option value="test3">Test3</option>
	<option value="test4">Test4</option>
</select>

Open the console in IE11 or Chrome. Double click on the list to edit it in the form dialog and the error is thrown. Uncaught TypeError: undefined is not a function. selectjs:line 10, column 193

You expect the "selected" attribute but it is optional.

---

I un-minified the select.js and build a work around. After fixing the one error the next one occures...

here my code parts:

select.js: around line 10(minified version)

[...]
{
	id:"txtValue",
	type:"text",
	widths:["25%","75%"],
	labelLayout:"horizontal",
	label:c.lang.forms.select.value,
	style:"width:350px",
	"default":"",
	className:"cke_disabled",
	onLoad:function()
	{
		this.getInputElement().setAttribute("readOnly",!0)
	},
	setup:function(a,b)
	{
		//console.log( 'a', a );
		//console.log( 'b', b );
		if ( typeof ( b === 'undefined' ) )
		{
			return;
		}
		else
		{
			//console.log( 'b', b );
			//console.log( 'b attr', b.$.attributes['selected'] );
			if( typeof ( ( b.$.attributes['selected'] ) === 'undefined' ) )
			{
				return;
			}
			else
			{
				"clear"==a ? this.setValue("") : "option"==a && b.getAttribute("selected") && this.setValue(b.$.value);
			}
		}
	}
},
[...]

select.js: around line 12(minified version)

[...]
{
	type:"select",
	id:"cmbName",
	label:"",
	title:"",
	size:5,
	style:"width:115px;height:75px",
	items:[],
	onChange:function()
	{
		var a=this.getDialog(),
			b=a.getContentElement("info","cmbValue"),
			e=a.getContentElement("info","txtOptName"),
			a=a.getContentElement("info","txtOptValue"),
			d=g(this);
		i(b,d);
		e.setValue(this.getValue());
		a.setValue(b.getValue())
	},
	setup:function(a,b)
	{
		"clear"==a ? k(this):"option"==a && h(this,b.getText(),
		b.getText(),
		this.getDialog().getParentEditor().document)
	},
	commit:function(a)
	{
		var b=this.getDialog(),
		e=l(this),
		d=l(b.getContentElement("info","cmbValue")),
		c=b.getContentElement("info","txtValue").getValue();
		k(a);
		
		//console.log( 'e', e );
		// count is wrong, MINUS ONE, but there ist a new problem in the list, an empty element occures
		for( var f=0; f<e.count()-1; f++ )
		{
			var g=h(a, e.getItem(f).getValue(), d.getItem(f).getValue(), b.getParentEditor().document );
			d.getItem(f).getValue()==c && ( g.setAttribute("selected","selected"), g.selected=!0 )
		}
	}
}]
[...]

select.js: around line 14(minified version)

[...]
{
	type:"select",
	id:"cmbValue",
	label:"",
	size:5,
	style:"width:115px;height:75px",
	items:[],
	onChange:function(){
		var a=this.getDialog(),b=a.getContentElement("info","cmbName"),e=a.getContentElement("info","txtOptName"),a=a.getContentElement("info","txtOptValue"),d=g(this);i(b,d);e.setValue(b.getValue());a.setValue(this.getValue())
	},
	setup:function(a,b){
		//console.log( 'HIER 2 a', a );
		//console.log( 'HIER 2 b', b );
		if("clear"==a)
		{
			k(this);
		}
		else if("option"==a)
		{
			try
			{
				var e=b.getValue();
				h(this,e,e,this.getDialog().getParentEditor().document);
				"selected"==b.getAttribute("selected") && this.getDialog().getContentElement("info","txtValue").setValue(e)
			}
			catch( e )
			{
				// nothing
			}
		}
	}
}]
[...]

[Jakub Ś]

Problem can be reproduced from CKEditor 4.0 in Blink, Webkit and IE9+ browsers. It works in IE8 and Firefox probably because it is not possible to select form elements in contenteditable.

The error:
Message: Uncaught TypeError: undefined is not a function
Line: 207
URI: ckeditor/plugins/forms/dialogs/select.js