BackboneJS 'click' event not firing when 'focusout' event exists

0 votes
asked Sep 12, 2017 by david

I have a view in which I trigger dropdown that provides a number of options when a text input is in focus (similar idea to Select2) in BackboneJS:

events: { 'click .option': 'clickItem', 'focusin .big-select-input': 'focusIn', 'focusout big-select-input': 'focusOut'
},
focusIn: function() { this.$el.find('.big-select-options').show();
},
focusOut: function() { this.$el.find('.big-select-options').hide();
},
clickItem: function() { console.log('item clicked');
}
<input type="text" class="big-select-input" />
<div class="big-select-options" style="display:none;">
<div class="option">Item</option>
<div class="option">Item</option>
<div class="option">Item</option>
<div class="option">Item</option>
</div>

What I have noticed, is that the click event for the option doesn't fire when the 'focusout' event exist. If I remove the focusout event (or blur event), the click works.

How can I get the click and focusout to both work at the same time?

Here is a barebones example http://jsbin.com/bivilujili/1/edit?html,js,console,output

1 Answer

+2 votes
answered Mar 8, 2018 by t-j

If I understand correctly, you think you're clicking an option but you're not. When you try to click an option the input has to lose focus. When input loses focus you're hiding the option's container. So you can't click it anymore. They just hide.

You need to update your logic to not hide them.

Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter

...