Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Submit and clear buttons for search field

See original GitHub issue

On my project I wanted the search field for each table to have optional dedicated submit and clear buttons and I figured I’d see if this would be a wanted feature.

Here is my initial update

This happened to coincide with your big theme overhaul. I’m not sure if it will be possible to generalize the HTML syntax for all of the these because each UI framework constructs the input-group differently. So far I’ve verified with Bootstrap 4 but have coded up the configurations for Bootstrap 3 and Bulma. I had to take a little liberties so far (i.e. a useless div around the input search field only because Bulma needs it). Before I continue integrating the other UI frameworks let me know if you’d think this would be a good addition. If so, I’ll put up some jsFiddles to demonstrate the new functionality.

Here is how the search field will be rendered in the three currently implemented UI frameworks:

<!-- bulma -->
<div class="float-right search">
    <div class="field has-addons">
        <div class="control">
            <input class="input" type="text" placeholder="Search">
        </div>
        <div class="control">
            <button type="button" class="button" name="search" aria-label="Search" title="Submit Search"><i class="fa fa-search"></i></button>
        </div>
        <div class="control">
            <button type="button" class="button" name="clearSearch" aria-label="Clear Search" title="Clear Search"><i class="fa fa-times"></i></button>
        </div>
    </div>
</div>

<!-- bootstrap 3 -->
<div class="float-right search">
    <div class="input-group">
        <div class="">
            <input class="form-control" type="text" placeholder="Search">
        </div>
        <div class="input-group-btn">
            <button class="btn btn-secondary" type="button" name="search" aria-label="Search" title="Submit Search"><i class="glyphicon glyphicon-search"></i></button>
        </div>
        <div class="input-group-btn">
            <button class="btn btn-secondary" type="button" name="clearSearch" aria-label="Clear Search" title="Clear Search"><i class="glyphicon glyphicon-remove"></i></button>
        </div>
    </div>
</div>

<!-- bootstrap 4 -->
<div class="float-right search">
    <div class="input-group">
        <div class="">
            <input class="form-control" type="text" placeholder="Search">
        </div>
        <div class="input-group-append">
            <button class="btn btn-secondary" type="button" name="search" aria-label="Search" title="Submit Search"><i class="fa fa-search"></i></button>
        </div>
        <div class="input-group-append">
            <button class="btn btn-secondary" type="button" name="clearSearch" aria-label="Clear Search" title="Clear Search"><i class="fa fa-times"></i></button>
        </div>
    </div>
</div>

These options can be enabled with boolean fields ‘searchButton’ and ‘clearSearchButton’.

I think it would be best to make these attached to the search field (so it is clear they operate on the it and not the table like the other toolbar buttons) but if it can’t be done generally for every theme then they can just be attached to the general toolbar if ‘search’ is enabled.