Automatically focus search input field for "Add Product" dialog

Cabji · February 23, 2018, 3:58am

I am looking for some guidance about which files to edit if we can add some code to automatically give focus to the search input box on the “Add Product” dialog when you are building a Quote.

To be clear:
When building a Quote, you click “Add Product” button
The Add Product dialog appears on screen with the first page of products in your database
In the top left is the search input box with button “Search product” to the right of it
I would like to be able to make the keyboard focus automatically be in the search input box, so the user does not have to click to focus in there.

If this is possible does any know which files to look at for editing? Also is it good for a feature request?

Kovah · February 23, 2018, 8:50am

The corresponding file is this one:

github.com

InvoicePlane/InvoicePlane/blob/1.5/application/modules/products/views/modal_product_lookups.php#L137


                <option value="<?php echo $family->family_id; ?>"
                    <?php if (isset($filter_family) && $family->family_id == $filter_family) {
                        echo ' selected="selected"';
                    } ?>>
                    <?php _htmlsc($family->family_name); ?>
                </option>
            <?php } ?>
        </select>
    </div>
    <div class="form-group">
        <input type="text" class="form-control" name="filter_product" id="filter_product"
               placeholder="<?php _trans('product_name'); ?>"
               value="<?php echo $filter_product ?>">
    </div>
    <button type="button" id="filter-button"
            class="btn btn-default"><?php _trans('search_product'); ?></button>
    <button type="button" id="product-reset-button" class="btn btn-default">
        <?php _trans('reset'); ?>
    </button>
</div>

I am not sure if adding the autofocus via HTML works on modals.