JSFiddle - React, Tailwind, and code Playground

by Trevor W

HTML

<p>Create DropDownTextField with an element. Run `ddtf().autoload();` to initiate</p>
<div class="ddtf-r" data-list="times"></div>

<div class="createDDTFR-example"></div>

<div style="border: 1px solid black;">
  <button class="foo" style="width:40px;height:40px;">+</button>
  <div class="foo-append"></div>
</div>

CSS

/*
Made by Trevor Wood
github.com/trevorwood222
*/

.ddtf *{
  padding:0; margin:0;
  box-sizing: border-box;
}

.ddtf{
  margin:5px;
  position:relative;
  padding-right:40px;
  /* float: left; */
  width:150px;
  display: inline-block;
}
.ddtf input{
  width:100%;
  position:relative; z-index:20;
  border:1px solid rgba(200,200,200,1);
  padding:0px 10px;
  height: 40px; line-height: 40px;
  font-size:16px;
  float: left;
  border-radius:2px 0 0 2px;
  outline: none;
}
.ddtf input:focus {
  border:1px solid rgba(150,150,150,1);
}

.ddtf-bttn{
  position:absolute;
  top:0px;right:0px;
  z-index:20;
  height:40px; width:40px;
  background-color:rgba(200,200,200,1);
  float: left;
  cursor:pointer;
  border-radius:0 2px 2px 0;
}
.ddtf-bttn:hover{
  box-shadow: inset 0 0 250px 0 rgba(0,0,0,.1);
}
.ddtf-bttn:active{
  box-shadow: inset 0 0 250px 0 rgba(0,0,0,.2);
}

.ddtf-bttn span{
  top: 15px;left: 10px;
  position: absolute;
  display: block;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  
  border-top: 10px solid #555;
}

.ddtf-list{
  background-color:#FFF;
  width:100%;
  position: absolute;
  top:40px;left:0px;
  z-index:50;
  border-radius: 2px;
  max-height:200px;
  overflow:auto;
  box-shadow:0 1px 5px 0 rgba(0,0,0,.35);
  display:none;
}
.ddtf-list.open{
  display:block;
}
.ddtf-list li{
  color:rgba(50,50,50,1);
  padding:0px 10px;
  line-height:40px;
  list-style:none;
  cursor:pointer;
}
.ddtf-list li.sel{
  box-shadow:inset 0 0 500px 0 rgba(0,0,0,.1);
}

JavaScript

/*
Made by Trevor Wood
github.com/trevorwood1993
*/

if(typeof ddtf != 'function'){window.ddtf = function(){
	if ( typeof ddtf.init == 'undefined' ) {
		ddtf.init = true;
		ddtf.idCount = 0;
		ddtf.lists = [];
		setDocumentActions();
  }
  
	function createItem(
              listData, // Array - List of items
              options, // Array - 
              inputName, // String 
              inputPlaceholder, // String
              inputValue // String
            ){
		inputName == undefined ? inputName = "" : true;
		inputPlaceholder == undefined ? inputPlaceholder = "" : true;
		inputValue == undefined ? inputValue = "" : true;

		var id = ddtf.idCount++;
		var item = "";
		item += '<div data-ddtfid="'+id+'" class="ddtf">';
		item += 	'<div class="ddtf-main">';
		item += 		'<input name="'+inputName+'" placeholder="'+inputPlaceholder+'" type="text" value="'+inputValue+'">';
		item += 		'<div class="ddtf-bttn"><span></span></div>';
		item += 	'</div>';
		item += 	'<div class="ddtf-list">';
		item += 		'<ul>';
		for (var i = 0; i < listData.length; i++) {
			item += 	'<li>'+listData[i]+'</li>';
		}
		item += 		'</ul>';
		item += 	'</div>';
		item += '</div>';
	
		return {
			"id":id,
			"item":item
		}
	}
	
	function enableItemActions(
              id // Integer - elements id
            ){
		var item = $('.ddtf[data-ddtfid='+id+']');
		var button = item.find(".ddtf-bttn");
		var input = item.find("input");
		var list = item.find(".ddtf-list");
		
		button.on("click",function(){
			if(list.hasClass("open")){
				closeList(list);
			}else{
				openList(list,input);
			}
    });
    
    input.on("focus",function(){
      openList(list,input);
    });

    input.on("keyup",function(e){
      switch(e.which) {
        case 13: // enter
          return;
        case 38: // up
          return;
        case 40: // down
          return;
      }

      var val = $(this).val();
      var sel = list.find("li:first-of-type");
      list.find("li").each(function(){
   ...