ComboBox attachChange

[former_member636317]

Hello everyone,

I am using Combobox in SAPUI5, but recently facing a problem, hope someone can help me!
Based on the documentation an event change is fired when:

• The focus leaves the text input field
• The Enter key is pressed
• In addition, this event is also fired when an item in the list is selected.

Unfortunately the last one is not working in my case. What exactly happens is that when I click with mouse the list is closed and the name is selected correctly, but the cursor is still pulsing so the text input of the ComboBox is still focused.

Here you have my code:

var languageComboBox = new sap.m.ComboBox();
//Add items to languageComboBox: 

for (var i in data.locales){ 

var currentItem = data.locales[i]; 

if (currentItem.enabled) 

languageComboBox.addItem(new sap.ui.core.Item({key:currentItem.id, text: currentItem.label}));
} 

languageComboBox.attachChange(function(oEvent) {
var oSelectedItem = languageComboBox.getSelectedItem(); 
var sItemKey = oSelectedItem.getKey(); 

var sItemText = oSelectedItem.getText();.........

PS. .attachChange works correctly if there are two other cases happening.

[mvaibhav]

hi Lefter,

I am not sure whats the issue if the the cursor is still at ComboBox because the control is behaving as expected.

Correct me if I have misunderstood your issue.

The documentation never says that the event will remove the focus from the combobox. Hence when you select the value form dropdown, the change event is triggered and the selected entry changes.

Thanks,

Vaibhav Maheshwari

[former_member636317]

Hi Vaibhav,
thanks for the answer.
Actually I am not interested in removing the cursor, but the change event is not triggered after i click in one of the element in the list.

This is the view after I click at the item in the list.

This is the view after I click somewhere out of the input field, which is actually the view I want immediately after I click the item.

Thanks once again!

[mvaibhav]

If that is the case, try attachSelectionChange() event once. Ideally attachChange() should also work whenever you change a selected item, but not sure what is causing the issue your case. I tried in version 1.52.36 and it worked for me.

What is the version of UI5 you are using ?

Try putting some alert on change Event to see if you get it whenever you select something.

Thanks,

Vaibhav

[former_member636317]

Hi Vaibhav,

thanks for the answer and sorry for my late one.
sapui version: "1.38.39"

I have tried that, the attachChange does not get triggered if just click in one of the elements of the list.

That's how I put the items in the ComboBox.

data.locales is a vector of objects.

for (var i in data.locales)
{ 
var currentItem = data.locales[i]; 
if (currentItem.enabled) 
languageComboBox.addItem(new sap.ui.core.Item({key:currentItem.id,text: currentItem.label})); 
}

[dev_amar]

Hi Lefter,

Could you please try with "attachSelectionChange()" instead of "attachChange()"

Thanks,

Amar

[former_member636317]

Hi Amar,
thanks for the answer. I have already tried that, but it brings another problem into play. When I start writing in the text field of the ComboBox, at the first moment I write a letter, the first element in the list that starts with that letter gets selected and the dropdown list gets closed.

Thanks,

Lefter

[dev_amar]

Hi Lefter,

Please share the ui5 version you are working on so that I can simulate the scenario and help you further.

Thanks,

Amar

[former_member636317]

Hi Amar,

this is the sap.ui.version: "1.38.39"

thanks in advance for the help.

Lefter

[dev_amar]

Hi Lefter,

Your code seems to be working fine on my system with sapui5 version 1.38.39. I am using following CDN for bootstrapping,

https://sapui5.hana.ondemand.com/1.38.39/resources/sap-ui-core.js

Please find the code and test results below,

Code:

 onInit: function () {
   var languageComboBox = new sap.m.ComboBox();
   //Add items to languageComboBox: 
   var data = {
    locales : [
     {id:"ar", label: "Arabic", enabled: true},
     {id:"en", label: "English", enabled: true},
     {id:"tr", label: "Turkish", enabled: true}
    ]
   };
   for (var i in data.locales) {
    var currentItem = data.locales[i];
    if (currentItem.enabled)
     languageComboBox.addItem(new sap.ui.core.Item({
     key: currentItem.id,
     text: currentItem.label
    }));
   }
   languageComboBox.attachChange(function (oEvent) {
    var oSelectedItem = languageComboBox.getSelectedItem();
    var sItemKey = oSelectedItem.getKey();
    var sItemText = oSelectedItem.getText();
    console.log(sItemKey + "and" + sItemText + "is selected");
   });
   
   this.getView().byId("page1").addContent(languageComboBox);
  }

Test Result:

Thanks,

Amar Shukla

[former_member636317]

Hi Amar,

thanks for executing it in your machine.
What do you suggest me to change in my case?

Lefter