JSFiddle - React, Tailwind, and code Playground

by DelphinPRO

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<div class="dropdown pull-right" id="myDropdown">

<a  href="#" aria-expanded="false" data-toggle="dropdown" role="button" class="ficon-search dropdown-toggle">Click</a>

<div class="dropdown-menu">
<div class="input-group">
<input class="filter-type form-control form-control-sm" id="myInput">
<div class="input-group-btn">
<button type="button" class="btn btn-secondary btn-sm">Ok</button>
</div>
</div>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>

JavaScript

$('#myDropdown').on('shown.bs.dropdown', function () {
  $('#myInput').focus();
})