Hi,
I have an issue with ComboBoxItem and the way it keeps hold of its
selection versus the validations and the use of the enter key.
See included test bed sample code to better understand the problem and
reproduce the issues I'm experiencing.
Any idea on how this could be resolved ?
Thanks,
I have an issue with ComboBoxItem and the way it keeps hold of its
selection versus the validations and the use of the enter key.
See included test bed sample code to better understand the problem and
reproduce the issues I'm experiencing.
Any idea on how this could be resolved ?
Thanks,
Code:
<HTML>
<HEAD>
<SCRIPT>
window.isomorphicDir = 'isomorphic/';
</SCRIPT>
<SCRIPT SRC="isomorphic/system/modules/ISC_Core.js"></SCRIPT>
<SCRIPT SRC="isomorphic/system/modules/ISC_Foundation.js"></SCRIPT>
<SCRIPT SRC="isomorphic/system/modules/ISC_Containers.js"></SCRIPT>
<SCRIPT SRC="isomorphic/system/modules/ISC_Grids.js"></SCRIPT>
<SCRIPT SRC="isomorphic/system/modules/ISC_Forms.js"></SCRIPT>
<SCRIPT SRC="isomorphic/system/modules/ISC_DataBinding.js"></SCRIPT>
<SCRIPT SRC="isomorphic/skins/SmartClient/load_skin.js"></SCRIPT>
<TITLE>Investigation - ComboBoxItem vs <ENTER> key</TITLE>
</HEAD>
<BODY STYLE="overflow:hidden">
<h1>Bug with ComboBoxItem when hitting <ENTER> key while focus is in the combo</h1>
<p><b>Why we think this is a bug</b>: hitting the <ENTER> key while focus is in the combo does not behave the same as when you move focus out of the combo box item. It seems the combo box' validation does NOT kick in when you hit <ENTER> to submit the form.</p>
<span>Here are 2 different scenarios that expose the problem :</span>
<ol>
<li>Scenario 1 - Steps to reproduce the problem
<ol>
<li>Set focus on the combo box item</li>
<li>Select a valid value and keep focus in the combo box item</li>
<li>At the end of the selection, type "abc"</li>
<li>Hit the <ENTER> key a first time to close the pane showing the options</li>
<li>Hit the <ENTER> key a second time to submit the form</li>
<li>You'll see that even though the combo box's value is not right, the form is submitted using the last selected valid value</li>
</ol>
</li>
<li>Scenario 2 - Steps to reproduce the problem
<ol>
<li>Set focus on the combo box item</li>
<li>Select a valid value and keep focus in the combo box item</li>
<li>Use the backspace key to clear the value</li>
<li>If the pane showing the options is displayed, hit the <ENTER> key to close the pane showing the options</li>
<li>Hit the <ENTER> key to submit the form</li>
<li>You'll see that even though the combo box's value is not right, the form is submitted using the last selected valid value</li>
</ol>
</li>
</ol>
<p><b>Expected result</b>: in both scenarios, we'd expect that hitting the <ENTER> key would kick in the validation instead of directly submitting the form.</p>
<p><b>Solution proposal</b>: When the combo box item has the focus and the pane showing the options is NOT displayed, hitting the <ENTER> key should behave the same as if you move focus out of the combo box item <b>before</b> submitting the form.</p>
<span>NOTES:</span>
<ul>
<li>The combo box item's values get cleared after submitting the form because the bogus JSON received contains nothing; this is understood and OK for our test.</li>
<li>We tried with a SearchForm instead of a DynamicForm and the behavior is the same.</li>
</ul>
<SCRIPT>
var pickerDataSource = DataSource.create
({
ID : 'pickerDataSource',
clientOnly : true,
testData :
[
{ 'user_id': 1, 'name': 'Chris Rivers', 'email': 'chris@hipchat.com', 'username' : 'riversc' },
{ 'user_id': 3, 'name': 'Peter Curley', 'email': 'pete@hipchat.com', 'username' : 'curleyp' },
{ 'user_id': 5, 'name': 'Garret Heaton', 'email': 'garret@hipchat.com', 'username' : 'heatong' }
],
fields :
[
{ name : 'user_id', type : 'integer' },
{ name : 'name', type : 'text' },
{ name : 'email', type : 'text' }
]
});
var dataSource = DataSource.create
({
ID : 'dataSource',
dataFormat : 'json',
dataURL : 'bogusJson.html', // static file containing an empty JSON array, such as: []
fields : [ { name : 'q', required : true } ],
transformRequest : function(dsRequest)
{
feedbackArea.addMember(Label.create({ contents : new Date() + 'Data in transformRequest(): ' + isc.JSON.encode( dsRequest.data ), height : 1 }));
return this.Super('transformRequest', arguments);
}
});
var feedbackArea = VLayout.create();
VLayout.create
({
width : 800,
members :
[
VLayout.create({ height : 600 }), // Bogus layout to create room for our intro and explanation,
DynamicForm.create
({
valuesManager : ValuesManager.create({ dataSource : 'dataSource' }),
saveOnEnter : true,
fields:
[
{
name: 'q',
title : 'Problematic combo',
editorType : 'ComboBoxItem',
displayField : 'name',
valueField : 'username',
addUnknownValues : false,
optionDataSource : 'pickerDataSource',
sortField : 'name',
hint : 'Select a value',
showHintInField : true,
textMatchStyle : 'substring',
pickListWidth : 550,
pickListHeight : 245,
pickListFields :
[
{ name : 'user_id', width : '10%', title : 'User id' },
{ name : 'name', width : '40%', title : 'Name' },
{ name : 'email', width : '50%', title : 'Email' }
],
changed : function(form, item, value)
{
feedbackArea.addMember(Label.create({ contents : new Date() + 'Combo box item changed. Selected item: ' + value, height : 1 }));
}
},
{
name : 'useless',
title : 'Useless',
hint : 'Field available to move focus out of the ComboBoxItem',
showHintInField : true,
width : 300
},
{
editorType : 'SubmitItem'
}
]
}),
Canvas.create({ height : 30 }), // Spacer
Label.create({ contents : 'See submitted queries below : ', height : 1 }),
feedbackArea
]
});
</SCRIPT>
</BODY>
</HTML>
Comment