Почему для выбора ряда в таблице необходимо двойной клик?

Всем привет. У меня есть страничка на которой находиться выпадающий список с именами кастомеров. При выборе кастомера динамически подгружается таблица (используется ajax) с конфигурациями для этого кастомера.

Выбор конфигурации осуществляеться кликом на соответсвующий ряд:

Когда таблица имеет более чем 5 рядов она скролиться, т.е. имеет ползунок (максимальное количество рядов в таблице пять). Когда таблица имееет более чем пять рядов она меняет свой стиль:

Почему это происходит я не знаю. Если мы нажием на какой либо ряд в таблице (таблица имеет более чем 5 рядов) или вообще по любой области на странице, сначала выпадающий список расфокусируется а потом (или раньше) таблица меняет свой стиль:

И таким образом, для того чтобы выбрать конфигурации в таблице с более чем 5 рядов необходимо кликать дважды. (надо чтобы выбиралось только с одного клика)

js код:

function changeCustomerName(customerName) {
        getConfigurationsForSpecifiedCustomer(customerName);
    }
function createTableForConfiguration(data){
    fillTable(data);
    $('#configurationTable').show();
}
function fillTable(data){
    $('#tableBody').empty();
    data.forEach(function(item) {
        $('#tableBody').append(
            '<tr>' +
            '<td style="display:none">' +
            item.id +
            '</td>' +
            '<td>' +
            item.name +
            '</td>' +
            '</tr>'
        )
    });
}
function getConfigurationsForSpecifiedCustomer(customerName) {
    $.ajax({
        type: "POST",
        contentType: "application/json",
        url: "/getConfigurationsForSpecifiedCustomer",
        data: JSON.stringify(customerName),
        dataType: 'json',
        success: function(response) {
            createTableForConfiguration(response);
        },
        error: function(e){
            // alert('Error from getConfigurationsForSpecifiedCustomer' + e);
            console.log('Error from getConfigurationsForSpecifiedCustomer' + e);
            $('#configurationTable').hide();
        }
    });
}
$(document).ready(function(){
$('#secondTable').on("click", '#tableBody tr', function(){
    var selected = $(this).hasClass("highlight");
    $("#tableBody tr").removeClass("highlight");
    if(!selected)
        $(this).addClass("highlight");
    $("[name='configuration']").val($(this).context.children[0].innerText);
});
});

html:

 <div id="table" class="scroll">
            <table id="secondTable" class ="tableBorder">
                <thead>
                <tr>
                    <th style="display:none">id</th>
                    <th>Configuration Name</th>
                    <th>Product Name</th>
                    <th>Product Version</th>
                    <th>Solution Build</th>
                    <th>Customer Name</th>
                    <th>GP Code</th>
                    <th>Oracle DB Version</th>
                    <th>Configuration Version</th>
                </tr>
                </thead>
                <tbody id="tableBody">
                </tbody>
            </table>
        </div>

Style:

body {
    font-size: 1em;
}
h1 {
    font-size: 2em;
}
table.tableBorder {
    width: 100%;
    border: 1px solid black;
    border-collapse: collapse;
}
table.tableBorder th, table.tableBorder td {
    padding: 4px 3px;
    border: 1px solid black;
}
.scroll{
    width: 100%;
    max-height: 150px;
    overflow: auto;
}
.highlight { background-color: grey; }

Ajax response:

В Ajax response возвращается List. Configuration - это POJO класс. Заметил, что если передавать List то все работает нормально, стиль таблицы не меняется и двойного нажатия не требует.

Контроллер который отвечает на ajax call:

@RequestMapping(value = "/getConfigurationsForSpecifiedCustomer", method=RequestMethod.POST)
public @ResponseBody List<Configuration> getConfigurationsForSpecifiedCustomer(@RequestBody String customer) {
    if("".equals(customer))
        return null;
    return configurationService.getConfigurationsOfCustomer(customer.replaceAll("\"", ""));
}

Configuration class:

@Builder
@AllArgsConstructor
@Data
public class Configuration {
    private final int version;
    private final UUID id;
    private final String name;
    private final String author;
    private final String comment;
    private Map<String, String> customerInfo;
    private Collection<Rule> rules;
    private Collection<WhiteListItem> whiteList;
}

Версия jquery^

/static/js/jquery-2.1.1.min.js

В чем тут проблема понять не могу, да и мозг отказывается. Буду рад вашим предположениям.