MultiFilter - clear text input without mixing

[adamerow]

First off, MixItUp has beed a life saver for the project I'm working on. Thank you!

Is there a way to clear the text input without triggering a mix action?

I have a search bar and filter toggles that are in separate sections of my page. Each has a "clear search" buttons that should reset everything. Using setFilterGroupSelectors() and parseFilterGroups() resets the mixer, but doesn't clear the text input. Clearing the text before or after that creates a second mix action and a jumpy delay to the results.

--- MAIN SECTION ---

<form id="search-wrap">
    <div>
        <fieldset data-filter-group id="filter-search" class="search-bar">
            <input type="text" data-search-attribute="data-name" placeholder="Search...">
            <button class="clear-search-bar" type="reset">X</button>
        </fieldset>
        <div class="button-wrap">
            <button type="button" class="large green icon filter-open">
                <p class="btn-txt">Show Filters</p>
                <img src="./img/icons/filter-icon.svg" alt="filter icon">
            </button>
        </div>
        <div class="button-wrap">
            <button type="button" class="large gray icon filter-reset" tabindex="-1">
                <p class="btn-txt">Clear Search</p>
                <span>X</span>
            </button>
        </div>
    </div>
</form>

<section class="results mixContainer">
    <div class="mix default">
        <p>We didn't find anything matching your search.</p>
    </div>
</section>

--- SIDE MENU SECTION ---

<aside id="filter-menu" class="menu open-filter">
    <form class="filters">

        <label class="drop">
            <input type="checkbox" checked>
            <h2>Skills<span>⌃</span></h2>
            <div class="drop-list">
                <ul class="buttons" data-filter-group="group1" data-logic="and">
                    <button type="button" class="filter" data-toggle=".1">group1 - 1</button>
                    <button type="button" class="filter" data-toggle=".2">group1 - 2</button>
                    <button type="button" class="filter" data-toggle=".3">group1 - 3</button>
                    <button type="button" class="filter" data-toggle=".4">group1 - 4</button>
                    <button type="button" class="filter" data-toggle=".5">group1 - 5</button>
                    <button type="button" class="filter" data-toggle=".6">group1 - 6</button>
                </ul>
            </div>
        </label>

        <label class="drop">
            <input type="checkbox" checked>
            <h2>Industries<span>⌃</span></h2>
            <div class="drop-list">
                <ul class="buttons" data-filter-group="group2">
                    <label class="button-check">
                        <input type="checkbox" value=".1"/>
                        <p>group2 - 1</p>
                        <div class="back"></div>
                    </label>
                    <label class="button-check">
                        <input type="checkbox" value=".2">
                        <p>group2 - 2</p>
                        <div class="back"></div>
                    </label>
                    <label class="button-check">
                        <input type="checkbox" value=".3">
                        <p>group2 - 3</p>
                        <div class="back"></div>
                    </label>
                    <label class="button-check">
                        <input type="checkbox" value=".4">
                        <p>group2 - 4</p>
                        <div class="back"></div>
                    </label>
                    <label class="button-check">
                        <input type="checkbox" value=".5">
                        <p>group2 - 5</p>
                        <div class="back"></div>
                    </label>
                </ul>
            </div>
        </label>
    </form>

    <div class="button-bar">
        <button class="large gray filter-reset">Clear Filters</button>
        <button class="large blue filter-close">Close</button>
    </div>

</aside>

--- SCRIPT ---

// CREATE MIXITUP
homeMixer = mixitup($('.results'),
{
    pagination: {
        limit: 12,
        loop: true,
        hidePageListIfSinglePage: true,
        hidePageStatsIfSinglePage: true,
        maintainActivePage: false
    },
    multifilter:
    {
        enable: true,
        keyupThrottleDuration: 500
    },
    load:
    {
        filter: 'none'
    },
    controls: {
        toggleLogic: 'and',
        toggleDefault: 'none'
    },
    animation:
    {
        duration: 500,
        nudge: false,
        reverseOut: false,
        effects: "fade"
    },
    callbacks:
    {
        onMixFail: function(state)
        {
            homeMixer.filter('.default');
        }
    }
});

// ON CLICK - RESET BUTTONS
$(document).on('click', '.filter-reset', function()
{
    homeMixer.setFilterGroupSelectors('group1', []);
    homeMixer.setFilterGroupSelectors('group2', []);

    homeMixer.parseFilterGroups(); // <--- TWO SEPARATE
    $('#search-wrap')[0].reset();  // <--- MIX ACTIONS
});

// MAKE CHECKBOXES TOGGLE LIKE RADIOS
$('[data-filter-group="group2"] [type="checkbox"]').change(function()
{  
    if(this.checked){
        $('[data-filter-group="group2"] [type="checkbox"]').not(this).prop('checked', false);
    }    
});

// DON'T REFRESH THE PAGE
$(document).on('submit', '#search-wrap', function(event)
{
    event.preventDefault();
    event.preventDefault ? event.preventDefault() : (event.returnValue = false);
});