JSFiddle - React, Tailwind, and code Playground

by Mahmoud Al-Qudsi

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="magic-test">
    <fieldset style="border-width: 1px; border-style: solid; border-color: #bfbab4; padding: 5px;">
        <div>
            <input style="width: 266px;" type="text" value="Just a place for you to start tabbing..." />
        </div>
        <div style="display: inline-block;">
            <label for="credit_card_month">Exp. Month</label>
            <select id="credit_card_month" class="magic" style="width: 132px;" name="credit_card[expiry_month]" data-placeholder="Select Month...">
                <option value=""></option>
                <option value="01">January</option>
                <option value="02">February</option>
                <option value="03">March</option>
                <option value="04">April</option>
                <option value="05">May</option>
                <option value="06">June</option>
                <option value="07">July</option>
                <option value="08">August</option>
                <option value="09">September</option>
                <option value="10">October</option>
                <option value="11">November</option>
                <option value="12">December</option>
                <option class="extraneous" value=""></option>
                <option class="extraneous" value="01">01</option>
                <option class="extraneous" value="02">02</option>
                <option class="extraneous" value="03">03</option>
                <option class="extraneous" value="04">04</option>
                <option class="extraneous" value="05">05</option>
                <option class="extraneous" value="06">06</option>
                <option class="extraneous" value="07">07</option>
                <option class="extraneous" value="08">08</option>
                <option class="extraneous" value="09">09</option>
                <option class="extraneous" value="10">10</option>
              ...

CSS

div.magic-test fieldset *:focus {
    outline-width: 5px;
    outline-style: auto;
    outline-color: rgb(94, 158, 214);
}
div.magic-test {
    margin-bottom: 20px;
}

JavaScript

$(document).ready(function () {
    $("select.magic").each(function () {
        var select = $(this);
        if (!select.hasOwnProperty("removed")) {
            select.removedExtraneous = [];
        }

        var filterFunction = function () {
            var oldVal = select.val();
            select.children("option.extraneous").each(function () {
                //save to return it later
                select.removedExtraneous.push($(this));
                $(this).detach();
            });

            //select the matching "proper" option
            select.val(oldVal);
        };

        select.bind("keydown", function (event) {
            if (event.keyCode == 32) {
                filterFunction();
            }
        });

        select.bind("mousedown", filterFunction);

        select.bind("blur", function () {
            //select the "proper" equivalent
            var oldVal = select.val();
            select.children("option")
                .not(".extraneous")
                .filter(function () {
                return this.value == oldVal
            }).prop("selected", "true");

            //return the removed elements so it works on tab back
            if (select.append) {
                var option;
                while (option = select.removedExtraneous.pop()) {
                    select.append(option);
                }
            }
        });
    });
});