Grid column with edit template utilizing auto complete selects first row when using the mouse to move between columns.

I have a grid with 4 columns. The 2nd column (description) utilizes an edit template with an auto complete control that is populated remotely via an odata source. When you add a new row to the grid the first column of the new row is selected and you can provide a value. If you use the mouse to select the second column of the new row, the grid automatically clears the value of the 2nd column from the first row and sets focus to the control. This occurs for every new row you add. However if you use the tab key instead of the mouse it works fine.

 <script type="text/javascript">

        var grdProducts = document.getElementById("grdProducts");

        var companyId = document.getElementById("companyId");

        grdProducts.addEventListener("keydown", grdProducts_OnKeyDown)

        var autoComplete;

        function create () { // to create input element

            return document.createElement('input');

        }

        function read () { // return edited value to update data source

            return autoComplete.value;

        }

        function destroy () { // to destroy the custom component.

            autoComplete.destroy();

        }

        function write (args) { // to show the value for custom component

            autoComplete = new ej.dropdowns.AutoComplete({

                dataSource:  new ej.data.DataManager({

                    url: '/odata/product',

                    adaptor: new ej.data.ODataV4Adaptor (),

                    crossDomain: true

                }),

                fields: { value: 'Name'}

            });

            autoComplete.appendTo(args.element);

        }

        ej.base.L10n.load({

            'en-US': {

                'grid': {

                    'EmptyRecord': 'Please add a new Item to this quote request to begin.'

                }

            }

        });

        function grdProducts_OnBeforeBatchSave(e) {

            jQuery.ajax({

                url: '/Company/Quote/BatchUpdate?companyId=' + companyId.value,

                type: "POST",

                data: JSON.stringify(e.batchChanges.addedRecords),

                dataType: "json",

                contentType: "application/json; charset=utf-8",

                success: function (data) {

                    window.location.rel='nofollow' href = '/Company/Quote/?quoteId=' + data.id;

                }

            });

            e.cancel = true;

        }

        function btnSave_OnClick() {

            var instance = grdProducts.ej2_instances[0];

            instance.editModule.batchSave();

            return true;

        }

        function grdProducts_OnKeyDown(e) {

            if (e.keyCode === 13) {

                var instance = grdProducts.ej2_instances[0];

                instance.addRecord();

            }

        }

    </script>

                <ejs-grid id="grdProducts" width="100%" beforeBatchSave="grdProducts_OnBeforeBatchSave" allowSorting="true" toolbar="@(new List<string>() { "Add" })">

                    <e-data-manager url="/Company/Quote/UrlDataSource" batchUrl="/Company/Quote/BatchUpdate" adaptor="UrlAdaptor"></e-data-manager>

                    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" showConfirmDialog="false" showDeleteConfirmDialog="true" mode="Batch" newRowPosition="Bottom">

                    </e-grid-editSettings>

                    <e-grid-columns>

                        <e-grid-column field="quantity" type="integer" format="N0" headerText="Quantity" textAlign="Left" width="150" editType="numericedit" defaultValue="1" validationRules="@(new { required= true })"></e-grid-column>

                        <e-grid-column field="description" type="string" headerText="Description" textAlign="Left" editType="stringedit" foreignKeyField="Name" validationRules="@(new { required= true })" edit="@(new {create="create", read="read", destroy="destroy", write="write"})"></e-grid-column>

                        <e-grid-column field="partNumber" type="string" headerText="Part Number" width="200" textAlign="Left" editType="stringedit"></e-grid-column>

                        <e-grid-column headerText="" width="100" commands="commands"></e-grid-column>

                    </e-grid-columns>

                </ejs-grid>