We have barcode scanners that we're using to scan an item from a combo box. What we do is, in the KeyDown event, we check for a tab key (or enter key, as some scanners use that) and then we check to see if the text in the combo matches an item. If it does, then what we want to do is clear out the combo's textbox, close the dropdown, and keep the focus inside the combo.
Specifically, what I'm doing at the end of my code is:
warehouseItemCombo.igCombo('text', '', false); warehouseItemCombo.igCombo('setFocus'); e.stopImmediatePropagation(); e.preventDefault();
The problem is, my combo remains open (dropped down) with the item that matches the scanned barcode in the textbox, and I can't really figure out where the focus is, but it doesn't appear to be in teh combo.
How can I make this work the way I want? Incidentally, this all works fine with just the enter key. It's with the tab key that the behavior is problematic.
Hi Pete,
When you are checking for the tab key in the keydown event, what are you then doing with a tab key press? The default behavior of the tab key is to take focus from the current element and tab over to the 'next' element of the page, whichever that is. This will explain why you are finding that the focus as shifted away from the igCombo.
What you will need to do is change the behavior of the tab key when handling keydown, for the behavior you need for it to have.
Troy,
The code above is what I'm doing in the keydown. I'm aware of what's happening. You say, "What you will need to do is change the behavior of the tab key when handling keydown, for the behavior you need for it to have." Yes, that's exactly what I'm asking you, is how to do that. How do I change the way the tab key is handled and not get the side effects I noted?
Pete
Hello Pete,
Please let me know if you need any additional assistance regarding this matter.
Thanks!
To do this you can you trigger a event based on an 'Enter' press. You would do this just after you cancel the event when checking if the key pressed was a 'tab' key. So you can do the following and you will get the behavior you are looking for:
$(function(){
$('#combo').keydown(function(e){
if(e.keyCode == 9) {
e.preventDefault();
e = $.Event('keydown');
e.which = 13;
$('#combo').trigger(e);
});
}
Attached here is an example showing this working.
Please let me know if any additional assistance is needed regarding this matter.
I want to update you that I am continuing to work on addressing this issue for you. At this stage I have a sample that does exhibit the behavior you have described when the 'tab' key is pressed.
I'm doing further testing to determine how to accomplish your objective.
I am pulling together an sample to test for this behavior or to use as an example for you. I will follow-up with you once I have it completed.
Tony,
The behavior I want when the Tab key or Enter key is pressed in the combo is:1> Determine if the text typed in so far matches an existing item. If it does, I want to know which item it is. This part I can handle. It works fine using the enter key.
2> Close the dropdown
3> Clear the text from the combo's textbox
4> Keep the focus in the combo's textbox so that the next item can be scanned.
2, 3 and 4 are where it's not doing what I want.