JSFiddle - React, Tailwind, and code Playground

HTML

<div class="input-field-holder" style="margin-right: 33px;">
<input id="Quantity" class="filter-params digits" type="text" data-type="int" name="Quantity" placeholder="Filtruj..." title="Pole wymaga liczby">
</div>
<div class="button-holder">
<a id="clear-Quantity" class="clear-input-field" style="float:left;" href="#">
</div>
<ul class="filter-dictionary" style="top: 16px; right: -1px; display: none;">
<hr class="dictionary-border" style="width: 144px;">
<li class="" data-value="1">dsaknkjcnxijnfdskjnvjfdbvjhdfvjhcjhvbdfbvjhfdb1</li>
<li class="selected" data-value="2">dsaknkjcnxijnfdskjnvjfdbvjhdfvjhcjhvbdfbvjhfdb2</li>
<li class="" data-value="5">test 5</li>
<li class="" data-value="6">test 6</li>
<li class="" data-value="7">test 7</li>
<li class="" data-value="8">test 8</li>
<li class="" data-value="9">test 9</li>
</ul>
<select class="show-dictionary"></select>
<input class="dictionary-flag" type="hidden" value="0">
</div>

CSS

.filter-dictionary li.selected
{
    background-color: #aaaaaa;
}

#extended-filter-dictionary li:hover
{
    background-color: #aaaaaa;
}
.show-dictionary {

border:none;
width: 17px;
float: right;
height: 16px


}
.show-dictionary:hover 
{
}

JavaScript

//Show dictionary
    $('.show-dictionary').on('mousedown', function (e) {
        e.preventDefault();//block html dropdown from showing
    });
    $('.show-dictionary').on('click', function (e) {
        var $this = $(this),
            dic = $this.siblings('.filter-dictionary');
        dic.slideToggle(100);
        $this.on('mouseup', function (e) {
            e.stopPropagation();
        });
        $('.input-field-holder').find('input').focus();
        //Dopasowanie bordertop
        dictionaryBorderFix();
        // e.stopPropagation();
    });
    //Hide dictionary when clicking ouside dictionary
    $('.filter-dictionary').on('mouseup', function (e) {
        e.stopPropagation();
    });
    $(document).on('mouseup', function () {
        $('.filter-dictionary').slideUp(100);
    });
    //Put value from dictionary to INPUT
    $('.filter-dictionary').each(function (e) {
        var dic = $(this);
        var dicLi = dic.find('li');
        var input = $('.input-field-holder').find('input[type=text]');
        //input.on('change', function () { $(this).trigger('focus'); });
        //klikniecie
        dicLi.bind('mouseover', function () {
            dicLi.removeClass('selected');
            $(this).addClass('selected');
        });
        dicLi.bind('click', function (e) {   
            //console.log(input[0]);
            input.val($(this).attr('data-value'));
            dic.slideUp(100);            
        });
        //Obsluga klawiatury
        input.bind('keydown', function (e) {
            var selected = dic.find('.selected');
            if (e.keyCode == 40) { //down
                if (!dic.is(':visible')) {
                    dic.slideDown(100);
                    dictionaryBorderFix();
                } else {
                    dicLi.removeClass('selected');
                    if (selected.next('li').length == 0) {
                        selected.siblings('li').first().addClass('selected');
                    } else {
         ...