JSFiddle - React, Tailwind, and code Playground

by jimp

HTML

<div style="position: relative;">
<form>
  <div>
    <select name="control1">
        <option value="1">Select 1, Option 1</option>
        <option value="2">Select 1, Option 2</option>
        <option value="3">Select 1, Option 3</option>
        <option value="4">Select 1, Option 4</option>
        <option value="5">Select 1, Option 5</option>
    </select>
  </div>
  <div>
    <select name="control2">
        <option value="1">Select 2, Option 1</option>
        <option value="2">Select 2, Option 2</option>
        <option value="3">Select 2, Option 3</option>
        <option value="4">Select 2, Option 4</option>
        <option value="5">Select 2, Option 5</option>
    </select>
  </div>
  <div>
    <select name="control3">
        <option value="1">Select 3, Option 1</option>
        <option value="2">Select 3, Option 2</option>
        <option value="3">Select 3, Option 3</option>
        <option value="4">Select 3, Option 4</option>
        <option value="5">Select 3, Option 5</option>
    </select>
  </div>
</form>
</div>
<div id="output" />

CSS

.log
{
    margin: 1em;
}

select
{
    margin: 1em;
}

#overlay
{
    background-color: rgba(0,0,0,0.25);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

JavaScript

alert(navigator.userAgent);

jQuery(document).ready(function ($) {
    $('#output')[0].innerHTML +=
        '<div class="log">'+
        navigator.userAgent+
        '</div>';

    var bIsiPhone = navigator.userAgent.match(/iPhone/i) != null;
    if (bIsiPhone == false)
    {
        if (console.log) {
            console.log('Not iPhone. <select> box overlays not needed.');
            console.log('%s',navigator.userAgent);
        }
        return;
    }
/*
    $('select').blur(function (e) {
        var name = $(this).attr('name');
        $('body > div#overlay[data-select-name="'+name+'"]').remove();
    });
*/   
	$('select').bind('focus'/*+' click'*/,function (e) {
        console.log(e.type);
        var name = $(this).attr('name');
        if ($('body > div#overlay[data-select-name="+name+"]').length) {
            return;
       	}
        var $form = $('form');
        var $overlay = $('<div id="overlay" />');
        	$overlay.attr('data-select-name',name);
        $overlay.click(function(e) {
            $overlay.remove();
//          $('body').focus();
        });
        $('body').append($overlay);
//      $form.after($overlay);
    });
    
    $('select').bind('blur'/*+' change'*/,function (e) {
        console.log(e.type);

        var $this = $(this);
        $('#output')[0].innerHTML +=
            '<div class="log">'+
            $this.attr('name')+' = '+$this.val()+
            '</div>';
        
        var name = $(this).attr('name');
        $('body > div#overlay[data-select-name="'+name+'"]').remove();
    });
});