CODEWITHSUNDEEP
angularjs
Avraam Mavridis
Avraam Mavridis

Reputation: 8920

ng-focus and ng-blur do not work on select DOM

First I create a simple example to see if the ng-focus and ng-blur are driggered on select, and then are my actual code, I cannot find why the second do not work:

<div ng-app ng-init="focus=false;blur=false;active=false"> 
<select ng-focus="focus=true;blur=false;" ng-blur="blur=true;focus=false;">
    <option>sdasdsa</option>
    <option>dsadsads</option>
</select>
    <input type="text" ng-class="{ myFocus: focus, myBlur: blur }">
</div>

    <br>
         <br>
              <br>
                   <br>

<div class="search-input" ng-init="focus=false;blur=false;active=false">
    <input type="text" ng-class="{ myFocus: focus, myBlur: blur }">
            <div class="selects">
              <div class="icon fluid select">
                <i  ng-class="{'large svg guests icon':rooms==2, 'large svg guest icon':rooms==1,'active':{{focus}}}"></i>
                <label ng-click="closeCalendar()">
                  <select ng-model="rooms" name="rooms" class="fluid" name="rooms" focus-parent selecter required ng-focus="focus=true;blur=false;" ng-blur="blur=true;focus=false;">
                      <option value="1">Einzelzimmer</option>
                      <option value="2">Doppelzimmer</option>
                  </select>
                </label>
              </div>
            </div>
          </div>

http://jsfiddle.net/deathhell/UTn5y/2/

Upvotes: 4

Views: 11066

Answers (2)

Daniel
Daniel

Reputation: 1861

You can use ng-focus and ng-blur on select elements. Just be aware that:

  • ng-focus - focus is achieved only when you click on select element.
  • ng-blur - focus is lost only when you click on any other element except the select element.

    • See example: http://jsfiddle.net/5bv2Z/19/

    Upvotes: 1

    Sam P
    Sam P

    Reputation: 1841

    You cannot use ng-focus and ng-blur for a select element.

    The alternative is to use ng-change which will trigger when a new option is selected.

    Note that with ng-change, it is required to have ng-model as well.

    http://jsfiddle.net/5bv2Z/

    Upvotes: 2

    Related Questions