Blur Event Is Triggered Instead Of Click

When a user starts typing into an input field, the web app I'm working on generates drop down with auto-fill options, if a user clicks on one of the options, it populates the corre

Solution 1:

Okay Have a look at these changes that I've made in your JS: I've Observed That: click event triggers after the blur. Instead of click use mousedown it will work.

Here Are The changes I've made in your JS:

$(".dropdown").on("mousedown", ".item-option", function(e){                
  e.stopPropagation();
//set item object with dropdown option text
...
...
...

updateOrder(true, item);
$('.dropdown').hide();
returnfalse;

});
//if customer enters custom information without clicking on item option
$('.id-input, .name-input, .price-input, .qty-input').blur(function(){

   updateOrder(false, {});
});


functionupdateOrder(clicked, item){
  if(clicked==true){
   //update order with the item information from the dropdown the user clicked
  }else{
  //update order by collecting all plaintext user entered into input fields
}
}

Hope It'll Help.. Cheers :)..

Solution 2:

Try below code.

$(".dropdown").on(click, ".item-option", function(event){                
   //set item object with dropdown option text
   ...
   ...
   ...
   updateOrder(true, item);
   $('.dropdown').hide();
   event.stopPropagation();
});

//if customer enters custom information without clicking on item option
$('.id-input, .name-input, .price-input, .qty-input').blur(function(){
   updateOrder(false, {});
});


functionupdateOrder(clicked, item){
  if(clicked==true){
     //update order with the item information from the dropdown the user clicked
  } else{
    //update order by collecting all plaintext user entered into input fields
  }
}

stopPropagation is required only in click event because, once dropdown option clicked, blur also triggered, which we need to stop. Blur does not trigger click, so stopPropagation not needed there.