0

I am trying to execute on blur event (using angular js) when user clicks out side of the text field (also only when clicked out side of the parent div (ID= parentID). With my code, on blur even is not getting triggered even when I click out of the parent div. What am I doing wrong?

Here is my HTML:

    <div id="parentId" (blur)="someMethod()">
      <div class="searchIcon" (click)="search()"></div>
       <input id="searchField" type="text" class="search" (keydown.enter)= "search()"
           placeholder="Search" [(ngModel)] = "textBoxUserString" />
   </div>

enter image description here

Abhi
  • 37
  • 8
  • A `div` element does not receive focus, and therefore does not lose focus, unless it is specifically told to. Add `tabindex="0"` to the `div`. Or, if you want the event to bubble, use the `focusout` event. See [MDN's article on `blur`](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event). – Heretic Monkey May 03 '21 at 12:57
  • I have tried adding tabindex="0" to parentDiv. However, it doesn't solve my issue. It only gets triggered on clicking on "searchIcon". I want this to get triggered when I click out of the parent div and also the child divs under it. – Abhi May 03 '21 at 13:06
  • Did you try using the `focusout` event, or any of the answers on the linked question? – Heretic Monkey May 03 '21 at 13:08

0 Answers0