JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://dev.joshmoto.wtf/iris/dist/iris.min.js"></script>
<!-- Gravity forms html mark up below -->

<div class="container pt-3">
  <form id="form">
    <div class="form-row">
      <div class="form-group col-6 iris-wrapper">
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text" style="background-color:#00e4bc"></span>
          </div>
          <input type="text" id="color_picker" class="form-control form-control-lg" value="#00e4bc" />
        </div>
      </div>
      <div class="form-group col-6 iris-wrapper">
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text" style="background-color:#0084ff"></span>
          </div>
          <input type="text" id="color_picker" class="form-control form-control-lg" value="#0084ff" />
        </div>
      </div>
    </div>
  </form>
</div>

SCSS

.input-group-prepend {
  .input-group-text {
    &::before {
      width: 18px;
      content: "";
      display: block;
      height: 1px;
    }
  }
}

.iris-picker {
  position: absolute;
  margin-top: 5px;
}

JavaScript

// loop the iris wrappers
$('.iris-wrapper','#form').each(function() {

  // set up current object vars
  $input 					= $('INPUT', this);
  $inputGroup 		= $('.input-group', this);
  $inputIndicator = $('.input-group-text', this);

  // set our input color indicator to default color
  $inputIndicator.css('background-color', $input.val());

  // init iris
  $input.iris({
    // on iris change
    change: function(event, ui) {
      // update input value on change
      $input.attr('value', ui.color.toString());
      // load the current value
      $inputColor.css('background-color', ui.color.toString());
    }
  });

  // move iris color picker after the input group
  $irisPicker = $('.iris-picker', this).insertAfter($inputGroup);

  // input blur function
  $input.blur(function() {
    setTimeout(function() {
      if (!$(document.activeElement).closest(".iris-picker").length)
        $input.iris('hide');
      else
        $input.focus();
    }, 0);
  });

  // when input is focused
  $input.focus(function() {
    // input iris show
    $input.iris('show');
  });

});