JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"></button>
    <ul class="dropdown-menu scrollable-menu" role="menu">
        <li><input class="form-control input-sm" id="search" type="text" style="height:100%; width:100%" /></li>
        <li><label class="lbl"><input class="checkbox" type="checkbox" value="1">Something</label></li>
        <li><label class="lbl"><input class="checkbox" type="checkbox" value="2">Something else</label></li>
        <li><label class="lbl"><input class="checkbox" type="checkbox" value="2">And so on</label></li>
    </ul>
</div>

JavaScript

$('.dropdown-menu').click(function (e) {
    e.stopPropagation();
});

$("#search").on('input', function () {
    alert('input change detected');
})