JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class='modal fade col-md-12 col-offset-6' id='letter-change-text' tabindex='-1' role='dialog' aria-hidden="true" style='overflow-x: hidden; overflow-y: hidden'>
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-body">
				<div class="row">
					<div class="col-md-12">
						<input type="text" class="form-control" style="height: 60px; font-size: 20px"/>
					</div>
				</div>	
			</div>
			<div class="modal-footer clearfix" style='border-top: none'>
				<button type="button" style='width: 200px' class="btn btn-primary" id="letter-change-text_yes"><i class="fa fa-check"></i> Ok, Go ahead!</button>
			</div>
		</div>
	</div>
</div>

JavaScript

$(function(){
    $input = $("#letter-change-text").find("input[type='text']");
	$input.val($.trim("I am just testing!!"));
    $input.focus(); // doesn't work
	$("#letter-change-text").modal('show');
	$input.focus(); // doesn't work
    
    setTimeout(function(){
        $input.focus(); // doesn't work
    }, 0);
});