JSFiddle - React, Tailwind, and code Playground

HTML

<div tabindex="-1" class="layout-column layout-gt-xs-row layout-align-start-center layout-margin">
  <div tabindex="-1" class="classic-text-input mdl-textfield mdl-js-textfield mdl-textfield--floating-label flex">
        <input tabindex="0" class="mdl-textfield__input" type="text" id="param_pattern_value"  value="enter text">
        <label class="mdl-textfield__label" for="param_pattern_value">
            <span>enter 1</span>
        </label>  

        <button tabindex="0" class="mdl-button mdl-js-button  mdl-button--icon mdl-button--accent margin-left clear_icon_in_input">
            <i class="material-icons mdl-textfield__label__icon">close</i>
        </button>

    </div>
 </div>

JavaScript

$(document).ready(function () {  
     $('#param_pattern_value').focus()
});

$("body").keydown(function(e){
		var TAB 	= 9;
	    var key = e.which;

	  	if (key == TAB ){
					$("#param_pattern_value").focus();
	  	}
	});