JSFiddle - React, Tailwind, and code Playground

by Ishank Dubey

HTML

<div id="ShippingGroupJoinWrapper">
    <div class="EditorFormFieldWrapper">
        <label>Shipping Group</label>                     
        <input class="EditorInput" id="ShippingGroup" name="ShippingGroup" type="text">
     </div>
     <br class="ClearBoth">
     <div  id="ShippingGroupListWrapper" class="ComboBoxListWrapper">
        <div id="ShippingGroupLinkListArea" class="ComboBoxList">
            <a href="#" class="LinkList ShippingGroupLinkList">blah</a>
            <a href="#" class="LinkList ShippingGroupLinkList">blah</a>
            <a href="#" class="LinkList ShippingGroupLinkList">blah</a>
            <a href="#" class="LinkList ShippingGroupLinkList">blah</a>
            <a href="#" class="LinkList ShippingGroupLinkList">blah</a>
         </div>                        
     </div>
</div>

JavaScript

// When the field is blured:      
$('#ShippingGroup').blur(function() {
    $('#ShippingGroupListWrapper').css('display','none');
    alert('blur');
});

$('.ShippingGroupLinkList').live("mousedown", function(e) {
    alert('You wont see me if your cursor was in the text box');
});

$('#ShippingGroup').focus(function(e){
    $('#ShippingGroupListWrapper').css('display','block');
});
$('#ShippingGroupListWrapper').css('display','none');