3

I'd like to automatically set the focus on the input control within Angular's ui-grid filter:

enter image description here

However, that control doesn't have a name or ID. This is what the HTML looks like:

<div class="gridFullThin" ui-grid="gridApps" ui-grid-selection ui-grid-resize-columns></div>

I tried adding this attribute, but it didn't help:

autofocus="autofocus"

In IE, within the F12 tools DOM Explorer, I can see that the input looks like this:

<input class="ui-grid-filter-input ui-grid-filter-input-0 ng-touched" aria-label="Filter for column" type="text" placeholder="" ng-attr-placeholder="{{colFilter.placeholder || ''}}" ng-model="colFilter.term">

It doesn't have an ID. Is there a way I can automatically place focus here?

** EDIT ** - This is the generated HTML as shown in F12 (with the input element highlighted in blue):

enter image description here

Bob Horn
  • 33,387
  • 34
  • 113
  • 219
  • You can reference it by its class: `document.getElementsByClassName('ui-grid-filter-input-0')[0]` and trigger `.focus()` – Jon Uleis Dec 28 '16 at 19:38
  • I should note that `autofocus` would work if you were able to put it on the ``'s HTML (but not a parent `div`). – Jon Uleis Dec 28 '16 at 19:39
  • You may need to check this [link](http://stackoverflow.com/a/14837021/44544540) – MaxZoom Dec 28 '16 at 19:42
  • You can apparently edit the headerCellTemplate to include the autofocus property on the input elements: http://stackoverflow.com/questions/37277401/focus-by-default-in-filter-header-angular-ui-grid – trevor Dec 28 '16 at 19:44
  • @JonUleis I did that but the control isn't getting focus. I checked and my variable, element, exists. `var element = document.getElementsByClassName('ui-grid-filter-input-0')[0]; element.focus();` – Bob Horn Dec 28 '16 at 19:57
  • You should try to make this query inside a $timeout service. – Yoan Dec 28 '16 at 20:01
  • It's not working because getElementsByClassName is returning four elements. Grrr. – Bob Horn Dec 28 '16 at 20:14
  • This is might be helpful! http://stackoverflow.com/questions/14833326/how-to-set-focus-on-input-field?noredirect=1&lq=1 – Gowthaman Dec 28 '16 at 20:28

2 Answers2

1

Assuming you can't edit the markup to add your own ID, you can still target by class or specifying the input as a child of parent with id.

Correct answer as discussed in chat:

var elements = document.querySelector('.modal .ui-grid-header-cell .ui-grid-filter-input-0'); 
elements.focus();
Serg Chernata
  • 12,280
  • 6
  • 32
  • 50
  • I tried getting the elements by class, but I get four of them. – Bob Horn Dec 28 '16 at 20:20
  • @BobHorn it's tough to help more without seeing all of the code but you can be more specific when targeting the class. For example if you have one input in header and one in body you can select as 'header input' or in this case, with a class, 'header .ui-grid-filter-input'. – Serg Chernata Dec 28 '16 at 20:22
  • I just posted a screenshot in my post. Does that help? I just tried this, but it returns 0 elements: `$window.document.getElementsByClassName('ui-grid-header-cell .ui-grid-filter-input-0')` – Bob Horn Dec 28 '16 at 20:36
  • @BobHorn try document.getElementsByClassName('ui-grid-header-cell').getElementsByClassName('ui-grid-filter-input-0'); – Serg Chernata Dec 28 '16 at 20:43
  • TypeError: Object doesn't support property or method 'getElementsByClassName' – Bob Horn Dec 28 '16 at 20:49
  • @BobHorn wait, is there more than one input with class of .ui-grid-filter-input-0? It's numbered, which makes me think that could be a good single unique identifier. – Serg Chernata Dec 28 '16 at 20:52
  • Yes, there are four of them. – Bob Horn Dec 28 '16 at 20:54
  • @BobHorn are you also using jquery or no? – Serg Chernata Dec 28 '16 at 20:59
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/131747/discussion-between-serg-chernata-and-bob-horn). – Serg Chernata Dec 28 '16 at 21:00
  • I'm not sure how to answer that. I have it referenced in my index.html page. But whether I'm actually using Angular code, or jQuery, I'm not sure. – Bob Horn Dec 28 '16 at 21:00
0

if this is the first input element in your HTML mark-up, then you could do this:

document.forms[0].elements[0].focus();

otherwise, if you have hidden elements that come before this input, then you would have to loop throught the form elements and find the first non-hidden element.

Russell Jonakin
  • 1,716
  • 17
  • 18