Support Article
Dynamic Select OnChange Event is not working as expected
SA-731
Summary
Developer is using 'Repeating Column' layout in their section rule. They have defined onBlur event with 'Refresh this Section' on a Dynamic Select control in the section rule.
Using Keyboard (tab and down arrow), business user hits down arrow to select the value from a dynamic select control. After selection, User hits Enter key on the keyboard. User notices that, data is corrupted on the UI.
Error Messages
No error on UI, but data gets corrputed.
Steps to Reproduce
Create a Repeating Column layout
Add Dynamic select in it with On Blur event.
On the portal, select the dynamic select select using Keyboard and press Enter. New Column will be added as expected, but, data on the clipboard and the UI does not match
Root Cause
The root cause of this problem is a defect in customer application code/rules.
Two events have happened in this scenario
1. OnBlur event defined on DynamicSelect has fired
2. Enter key called some functionality which added a new column in the Repeat Column layout of the section
Since two events have fired same time, and there is a race situation and data is getting corrupted on the UI.
Resolution
1. Disable enter key, so, column will not be added when user hits enter key on the keyboard. Instead, configure a separate button to add new column.
2. Change onBlur to OnChange event.
To disable Enter key, follow below steps:
A. Create a non-auto generated section (e.g. DisableEnterKey) with this code
document.onkeydown = function()
{
var t=event.srcElement.type;
var kc = event.keyCode;
if((t == "text") && (kc == 13))
{
return false;
}
}
B. Include the section "DisableEnterKey" into main section that has Repeating Layout.
Published June 12, 2015 - Updated October 8, 2020
Have a question? Get answers now.
Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.