sap.m.Input change event is triggered when clicking on CheckBox

Question

I have two controls in my page ie sap.m.Input and sap.m.CheckBox . There is a change event attached to input field which gives an error bar if input text is not matched with the regex . This change event is triggered on clicking out of focus of the input field. Clicking on checkbox will hide this input and show a third control . Now if i enter something in input field which will not match regex and click on checkbox, It is triggering changeEvent of Input and not even selecting the checkbox. I tried many things like checking in change event whether checkbox is ticked or not, attached a click event on checkbox but no solution. Please help me so that i will be able to determine the click on checkbox if the current focus is on input field

Here is an example at jsbin . Here error will be thrown if input text contains @ and change event is triggered.

var textInput = new sap.m.Text({text:"Area:"})
var inputField =new sap.m.Input("inptId",{
  change:function(oEvent){

    sap.ui.getCore().byId("barId").setVisible(oEvent.getParameters().value.includes("@"));

  }
});

var select  = new sap.m.Select("select",
                               {visible:false,
                                items:[new sap.ui.core.Item({text:"India"}),
                                      new sap.ui.core.Item({text:"US"}),
                                       new sap.ui.core.Item({text:"UK"})
                                      ]
                               })
var hBox = new sap.m.HBox({items:[textInput,inputField,select]})

  var bar = new sap.m.Bar("barId",{
    visible:false,
    contentMiddle:new sap.m.Text({text:"Error"})
  });

  var chkBox = new sap.m.CheckBox("chkBxId",{
  text:"Select from dropdown",
  select:function(oEvent){        
    var selected = oEvent.getParameters().selected;
    sap.ui.getCore().byId("inptId").setVisible(!selected);
     sap.ui.getCore().byId("select").setVisible(selected);
    sap.ui.getCore().byId("barId").setVisible(false);
  }
});
var vBox = new sap.m.VBox({
  items:[bar,hBox,chkBox]
});

In this example it is happening sometimes not always but in my project its happening always as there are lot of validations are happening in change event.

Answer 1

@Ashish for focus out try following code.

this.getView().byId("input").addEventDelegate({
  onfocusout: function() {
    console.log("focus lost !!");
  }
}

and for enter key press use following code

.addEventDelegate({
  onkeypress: function(e) {
    if (e.which === 13) {
      do your stuff;
    }
  }
})  

once focus is out it will trigger function provide in onfocusout and while on focus if enter key is pressed it will trigger function provide in onkeypress event. Also you can merge this in one.

addEventDelegate({
  onkeypress: function(e) {
    console.log("Enter pressed fouse out", e.which);
  },
  onfocusout: function() {
    do your stuff!
  }
})