0

I have a form in a table which dynamically adds records with elements input for [name field], select of types[int,string,boolean] and a button to create new record having same fields, by default the focus gets applied to the button element for the newly created row which happens in ng-repeat. I wanted the focus to be applied on the name input field, I have tried something like this within addNewParam function to apply focus: element($event.currentTarget).parent().parent().find('[name="new-input-param"] input')[0].focus();. Can someone suggest me a better way of doing this. Here is the dom structure of the table

<table class="table property-value">
<tbody>
    <tr>
        <th class="ng-binding">Name</th>
        <th class="ng-binding">Type</th>
        <th>&nbsp;</th>
    </tr>
    <!-- ngRepeat: param in pageParams track by $index --><tr ng-repeat="param in pageParams track by $index" class="ng-scope">
        <td name="input-param-name">
            <input class="form-control app-textbox app-widget-wrapper ng-pristine ng-untouched ng-valid ng-not-empty" name="input-param-name-name" type="text" placeholder="parameter name" ng-model-options="{updateOn: 'blur'}" ng-model="param.name" ng-change="onPageParamsUpdate()">
        </td>
        <td>
            <select name="input-param-type-name" class="form-control app-select ng-pristine ng-untouched ng-valid ng-not-empty" ng-model="param.type" ng-options="val for val in pageParamTypes.split(',')" ng-change="onPageParamsUpdate()"><option label="string" value="string:string" selected="selected">string</option><option label="integer" value="string:integer">integer</option><option label="boolean" value="string:boolean">boolean</option><option label="date" value="string:date">date</option></select>
        </td>
        <td>
            <button name="webservice-remove-param" class="app-button" ng-click="addNewParam($event, newParam)">
                <i class="glyphicon16 glyphicon glyphicon-plus"></i>
            </button>
        </td>
    </tr><!-- end ngRepeat: param in pageParams track by $index -->
</tbody>
</table>

Here is the addNewParam function:

function addNewParam($event, newParam) {
if (!newParam.name) {
   wmToaster.show('error', $rs.locale.MESSAGE_ERROR_TITLE,    Utils.replace($rs.locale.MESSAGE_WARN_NAME_EMPTY_DESC, ['Param']));
} else {
Toaster.hide();
$s.pageParams.push(newParam);
$s.newParam = {'name': '', 'type': 'string'};
$s.onPageParamsUpdate();
element($event.currentTarget).parent().parent().find('[name="wm-new-input-param"] input')[0].focus();
}

}

Ritu K
  • 27
  • 6

1 Answers1

0

auto-focus itslef can do the job.Just add this custom directive into your app.

app.directive('autoFocus', function($timeout) {
    return {
        restrict: 'AC',
        link: function(_scope, _element) {
            $timeout(function(){
                _element[0].focus();
            }, 0);
        }
    };
});

usage is:

<input name="theInput" auto-focus>

Please refer to How to set focus on input field? for more options.

Community
  • 1
  • 1
Denny John
  • 464
  • 7
  • 20