From 7d3c51afb4da2d32469b0a97156eb17a2a277998 Mon Sep 17 00:00:00 2001 From: Michael Benford Date: Fri, 6 Dec 2013 01:12:45 -0200 Subject: [PATCH] fix(tagsInput): Added focus outline Implemented a visual outline for the tags box which is visible when the directive is focused so it's easy for keyboard users to determine where they are on the page. Closes #32. --- build/ng-tags-input.css | 7 +++ build/ng-tags-input.js | 19 +++++--- build/ng-tags-input.min.zip | Bin 3928 -> 4012 bytes build/ng-tags-input.zip | Bin 6723 -> 6859 bytes css/tags-input.css | 7 +++ src/tags-input.js | 19 +++++--- test/tags-input.spec.js | 89 ++++++++++++++++++++++++++++++++---- test/test-page.html | 2 +- 8 files changed, 120 insertions(+), 23 deletions(-) diff --git a/build/ng-tags-input.css b/build/ng-tags-input.css index 6ae3d4ff..09700f8c 100644 --- a/build/ng-tags-input.css +++ b/build/ng-tags-input.css @@ -26,6 +26,13 @@ font-size: 14px; } +.ngTagsInput .tags.focused { + outline: none; + -webkit-box-shadow: 0px 0px 3px 1px rgba(5,139,242,0.6); + -moz-box-shadow: 0px 0px 3px 1px rgba(5,139,242,0.6); + box-shadow: 0px 0px 3px 1px rgba(5,139,242,0.6); +} + .ngTagsInput .tags ul { margin: 0px; padding: 0px; diff --git a/build/ng-tags-input.js b/build/ng-tags-input.js index c4ccab26..d97f933b 100644 --- a/build/ng-tags-input.js +++ b/build/ng-tags-input.js @@ -69,7 +69,7 @@ angular.module('tags-input').directive('tagsInput', ["$timeout","$document","con replace: false, transclude: true, template: '
' + - '
' + + '
' + '
    ' + '
  • ' + ' {{ tag }}' + @@ -237,17 +237,24 @@ angular.module('tags-input').directive('tagsInput', ["$timeout","$document","con } } }) - .on('blur', function() { - if (!scope.options.addOnBlur) { + .on('focus', function() { + if (scope.hasFocus) { return; } - + scope.hasFocus = true; + scope.$apply(); + }) + .on('blur', function() { $timeout(function() { var parentElement = angular.element($document[0].activeElement).parent(); - if (parentElement[0] !== element[0] && scope.tryAdd()) { + if (parentElement[0] !== element[0]) { + scope.hasFocus = false; + if (scope.options.addOnBlur) { + scope.tryAdd(); + } scope.$apply(); } - }, 0); + }, 0, false); }); element.find('div').on('click', function() { diff --git a/build/ng-tags-input.min.zip b/build/ng-tags-input.min.zip index 7af94720c0d1f30269da279ae0ea2333108f3477..ea009b44c47ac36630563a5eb81354a913219777 100644 GIT binary patch delta 3886 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 delta 3801 zcmV;~4kq!eAJ`rZP)h>@6aWYa2mrRegpmy|e<7$OvZAHr4ozv(LYf$8fV2(b;0`!d z1y?IRr$oIm3@gq|NFJG{F@4tM-qWp8_|7*&^ ze|)#&{_NGO=8|V|o$|ulPLgb2S2kNLUG~Jh>qSW+AmhDW_f9XfM^&;D zIkB)uQ6APih=%tt&(=v?7o60xS*zfRg)DLp=GzibS!>x`7NV+)?2u=^nRh_%9{6Il zJRTi-1X57Ec>B8CIHB7x*eZ@;jgvK6f7x|j-0*NC7k6TCF!e&7rcPF;DfVdGrfKy4 zg;4hQ?HikwVGjEq$X31`Wbv*@6ubOh4K%C}`;<=X*$e{m ztPImS!q=2lVuzVZ_&;1l$-Nb(yetDdi@~o{R<&@(NfwDOfjyboRu)e*QNAZ@f0kZY zmsP%dLo02o<38d0y~v_#%j$C`$!&~bv`*y{Z)rkoA*0|`K#pJ~8MXywZ@XAjZ^}|` z=c2ziEd4U9IY>%E9tsF9KVAXx2%%4eUais^bbiMmaV0 ziO07OyH%b_-im<{{vu73J{MY{e=F(4db3J=sca>M{FTSB$uQP(wCDQV}qcDuxj#+ z{BqIB(Y+#AY z$V+n`IW%|ZIU&LW=j`7i60?{^V$JKc`VUWQ;oEk@dX|2Q647LFawjY?*3k67)w`7_ zD5xmHTHknro07#_7l@M$FW$h0&WqW~sx4hhlQuF#b&r`v(p%Txg z4cjG|I?RDcL%NqBGiN>^e`^?zqTjO{nYER%zPgd5l+ryZ(oFMwBlG+B@ccQgizit^ zOJv0Svxs2f@&lYh6q#P}QN%Z2_Cs|q{#@|M->)bCn@)cEqg*~8T{KK&e3gouD5>BI z?|E5))svgfn#N_ZhuTMJXaem;WHXKdtb|L5s6VY7pdjGqjI?AsxW71N4{^M~s_}E-th2nv-G#)!0*;iZ+ zG+_{Wde*u4qr8ZjJ+WPvO=dx$74T%{{e5kil5VE>!En0z4Xk$p8~0GRf9BFpxmhzPyUM6Lh6cmkw4kFZXE@3SfzuyO=JG@I7;Y3dK-XZ=1E&V<8!% zR|U`PuHsr|8Kk zqQL=yY1t=ef0@$pHvnthBx+Z?sZ2XGAnghO*eqF^WZRB9VnW$-9W1yfD1SpfiK+1f zD1tK8O_vadT8*YI-XCFQ%_PDBY%;fEsM^H`$h+bRd1i^k(`5IFAf zIGH^Qf_0lJRvz}Fnn!sk4BAiRI!Y^2kMTHalN++Gf38l)qau+iJ|dCD#*j$uACbt) zHFqMNaUDnyc_Sdx^ua-T@%Dwd$Np~>NN`-&R~xoA9FM0EQabuQK?ofW#Ac9}h%>f% ziZ#4edix5MujlIS;Y4$)j4*RQC{<5lIwB2^oRA!k%QomnAtu+`^8)%f?j^@0PC?+I zg_Ta+f7icZQ;H*i8qmqdMt=*t8>-TGAD8ALI zk^dW)wbq3ER6HOskcHTYG=iqIggrAsW9d6sZ$Y zg7L~t{<)vb9b9lw}udg(@$h^v*?qKUbqHAHaS=SgHu zUEk?R$f6+Z`=!w&X52Z9q*i_mH?KA#>*!!wVMO+LDkv#mQt8`7nUHfo=xe@EG6ja!M58us_7*2YPwfkq#0+WwBn^yui! zb+_Nm$tq({*1KuRUs}sLT4}ONs!zG!;#U6UqbSjjm7nrkxO%^V>~+cVl^RNQ z9dR&*^ewqx5S;F32nL<=S%$LVM}@g<4T28!l(P3NTVC9P$to3`+EM$QxsT|re>;5z zAG$`FY^ojF=S>oCQv9zRQV1>bmAXc_qDutRCJ&2$$Pm3OQ3>ykZCT28eHefy6~$lO zz~QCdT>H-hjZ915StYIKu16hWl5!_*D;D24ZQD@6hK1`vyYjX(l%T}Wp;7g~Q zfc|Yp*(w|=a|R3pPRK}{glKi|cI(6>EQ3qD*X1v8PA5fUf<@OLUl?cQ;l^=)4yAV5 zp(4n>Op^9+EMfF-K-fMLeUR%0Cef9bfL;&8%4#1;Bun8oZ;ys56b=FNsG^FX-gnco zCY{Wy=p`CcBh+ea*dpcQe^GrP-U)LGIQYPwV0tDn@fh4f@2}Yna)d2-#i=9URBQGa z3ij>L$=O>iFR%X(eArzXzm_+~1K?@wZ~i0!I7fH(1O&wZVXQoL-wfDB0(=9WmZG?) zCj9g-13;$xh9Gyj1r8<|vGIXly+8*LE(@+>N9CbZDZdp~p zZGvzSqlMsTH{zuWw;HJ)!(|D&iwJ`r-M20gm6|n%g3UZ}HgJ2I?q9*u*(}`#4az@I zO9u$@$LPXn3IG6S5E=jgP)h>@6aWYa2mrRegp=S3Cx2F5kDEFW{VS-eN}CEthE2K~ z^K{?ted$yGfPsNnYiwkjO|nt{d&hhQvUJtC7kmj> z3WYWhGF~_^XHw}`lIkO|;#H`UrP}0R{76C$kUk6di`m8h{8&$dooj7{6Iw9?k~{GN zvuVaNKYw=CjgvwFqqEsy?GSVakJmMD!&L^%!O;~0WIm!>oJ@K4TpHb|oMc*R!|sZr zNZyRLi|^cZ>t<1X46K$S4{~nM1wSS2Liaq^hj!Lm_?re&lzZn*0--Fpq~fL&ia1@f zZGB8?p68y?7@zeEm_q6UIWgWieR)5!y~uM=$$tTPCkMl8mKxyC#J?wnR?a5|ShT5+ z3;YC)Ja=Ik9Rt$QJ$n&Wq!JP-EIM*03B;XhU`nfbGCI0(NrO9&x?cg2P&kGFl3dtY z@)HxvXN;s$XV1t_TQP>`qOt4&&Gz7#VKLH#kNfKf3AfRj}C(HHkZ87yB>nkK0%L49l#VCkUp1PH%IuU9lwxb!lqFa%dF`b>$E^O23Y&TK{bBTY9{l(%MJb$r2*i$n} z79*3_yTfbjzVur;cGwFC1UE72Z>7CPy$H-+y|#ZDL@omXC@6aWYa2mp}@hLH^;f9rDFNOu13r|4CwOln4=?D3{Ds}Vh; z)o5y6v1eSCvZ+L?t%8Uai8Tmt08p|<)^p^6@?!bU={wK>DQ~j*6I9tGfj-wheJZZzO&FH&l&u)`S{L9(DpNlD;30&97>|?!3X7WgUyU%x; zf8_c|{6T$}MI);t@$!}aSbC}b^^N+uULA>78cSN<6-VOtFVvG+xm+f| z^X<3K9>GOY%-4BRO_pW4&gFR2B=h{sHwyDb{| zsS!72)r-wCakEAdkf8-dERS;A(*7G>pw8RfaShApHi_=W{2Q-D3uRG$5OarQxc zl=p+=&S}L?Z<4(Jd+D9OKRG?yNbi)^@Bf5&r@y>=ce0V(AM^DWDf4b2f3cvTMYU*e zGMT3$FKbz2T4(FJPp6e+V`r__|AuA$V^S|Tv#*iu}kurEd%~_$gSeRk` zK51Y!#q_V2$-!?Y2mkTn;17SPufE>>>Pmc&T~9%tDV2c0VuDDJ7P3}Yn0o1uPrFU> zEDb1orYhMBohkSAHmMshe=%r9q)WJ)hL?dcTv|ja2M*}DDam0y@glUAXY%3fU$dfa zWP&AegXKZ~RV_j2)J&@lR%Ah6Ko|Pq#Rm2h^0wAe$i3sCT&|jM;WPEllg-x^ zJYZSu>G!{++^pNrSIqgJ_^X27FvzeP`LA z$8uc^%`=BwC2kXUS|a_Q`saVraJ% zrm5MGrz|HjH^VCbw!bhr>IQ#wrU%Iof2XKNVstigBGL6LIkc++^ ziLWiMB&NDXe?s^KNi#m~2M&5NJ%XLrKT!aD-08;zTGRG886l~ki0^nZc=y5o z7KrNXH|QyjVWM;Ktq>s_SHlBrE=S)AiCYmKN9N{s0>KthLdqO#P2OQLx6lEtJUFyD z6ro^F`PX>JM2`=#s{3YLKXl$e7h?!3M-(5~hf#Dyu2KQD{>xx1nQ$k+A9l z){TB5w~T^i--v>vYA+jHXl}&Or!;1RipMXOH6U*P@yD4-rv^$VY_%cj0qR3 zyd35pZEIBpf&Y;<$IL3CPnFV5u-!-7Xa`V%Op%$ZHH_O3<%I6FQnMDAS{ZFX`-Fv|N8uy^W*5~>K=SzyiIM}&W}it162N-hf;Ivs-zud48Vmh6QgO@{$c$2Hj z7!p3BXv2jzJ6*?wCi}p}Fp_Ib9htd-@jrW{&}{Ttq(RXp&)Jwx2*~(HecE$2N4}@a zTerf~HI4=hA^cL6STkCz?p>t*qLt9mnP+Z1y*kT#Enf7^ss~{VJ?6anz&&y7e{5*+ zl#emi@3V6tUiQwnnL7VdV%fKD)JYRX0W^nIeE1o?iGqp6#h#<=IS*8F(K?b@?K)8`E|I zfJ8~lyP9wT#tV5gV$Mh}Z#QbIe--YP##;-U)jDwp1PjJ)*|-ey*?Li96@^UDbZb6i zR)UD;aDOjGHHr=#futirS$l}8$7Ai@B@MQf{E%%Z1}@pK2*2|k(xc%RALBK;hB~=W zv&d>h#5p!VWp%P{N}M}l>kvD$Tcj1LGDilWYp=--v^^g2?O0gg2b_0de>0knJ7GLl z5wg$Ow2ev!&3D& zEwSSI^h00)4-g8&Lu)j+=~ENeFpAnZ!Z?kM6ryySx5?hnIfTdK5Q98v@GTRDd?GdY z0B8eSnATW^NVUWRU|bbFf1*8Y&zqD%mo^gA6yY{`oHRjbHfaII2X%vs-V!Egy1bu{ zS8gLC&x((ps(3eLUkq%IEXoF}i3*QPYIK-z3&TD)JxsU_L4U^v;|wPNJjR|YwW0;Z z8lG!l>+uRfHo#+pJ0#hYeFTw(43U*a=nfBYsDs0*1v)qAIH!=3e~zTC8(Y-!uHMV6dknrT~UZ;Mjv3upp6S+1edV^E|p9*JttEg8}gueOOP12EZo zpGbWE9F>uD6JX*6*MsSldJ4A2#LKk@6K_0`6YXV+D*`%9f0~#8G30Ye3?=$5j$iWo zJ_k?Zx_*uB(j_N2Yo^o5AJu+nAC@=<&ip$wV;vP~g0meudX^@=qI$izup^!VJ$&Gt zmy*k2V<*72I(jutgSVBO#>S=Z-hJHbkYvBg5!lbX`X<(iZVtoxMiN`Yi;YIKFQp-a zo3fVZMgf7ff0fxr)hFvUb~d*W)ts>hd3i^DhAKrH^qav@&(y&LcsJ+9I_QnmfAxZctI-}Wlo=}HkDIJ#II;EX zV8ttvw#O@Q^=0jv2`V&10j|(Y4`r)k6M4#QhI@j>BATdbPB&iKUOf~Dsu$GtaZ(Eu zbqJYOO24h9F4xrzt#$)VJX{b_LyhYZqH{eg64g?pvO;#g?UtGieM!5&u4Q#^8gptK zl$mx+f5)O&;(U#J1SvUNW=QLFTWVeAx6lSsFf^|wRh8TmG&N5Y*a+|icCDAGye`oa zEPs@FazB0f0*miti93og+IRMmgs-y6qO(e39c{^Nu!2WO{+){-KsaQo~XWRh_k_;m#t05Q>3q zSPkc+UZZgcePLx$3(PY&E!)N6Yz1fdA0!!NeNmn-$~%|~+I4lyty49Uei}n&f=<>n zf5X08au4pHb+ie?q-X}WZz=N~0bCSL&AnDK6V2%8yq?Ly<}w3@eGJ`~#yc9Y@Zgx+ zxPMcDi*u`;x6sX)PQiaF_D#2l8BQ9dXo-!o8wAM*cxJP<(zgJ4lkN*t_djMgH!wJ? zI4|K2?gQA69`ho8Ni9`a%-{H=3^}E2f51>{SrEn*EOsGOcbCP90&v;JMA#@0D>}9W zQA39hdK3fde22$(gJBrDIzdTq4=6+q8sWprLrTToT`e15J8da=6!E|Xeyd#Phqqas zQLBA)$54TDH$0teIZjAB{1E@~CMe*k)h#lD{kMH=`6mp<=+G*M+0Vx<>+r%ie#pA%4prwed`McNz(16ed@Ey+rpIP|4gr&c&@Xp99D`NI{x}=r6OAE9vgAQ@2dn6g#o<{if?kB8bw=yG)acue~Zv|LflRR z5Rf6l(fl0$8CU8kU-IZHHykq(xyZrMW#96JiM3CJe+Xv?J)#;f)mqMi;v%F?2&w8}7ts86C+`0Zri*6+b# z+wWus(ev_lj1MOfe<;w~(=M9SE|+ql`+CDpyBFFaGBZV=oPh9lyzxIV?X?Y*Anmvy zu)@i}u#g?ZKnRR%+uL(c{HuP>F~OnpYo5gp`3YEu8FFQ|-OeEc=&@YB-hF<2h>sW! zFXte1VI=M8@adJaPePAL7h8!OT^$aB+0YYbJt+kWs5hMRf7T2tn7{%1GZN#H<^TZL zC9tJgzy>kOh7m9_F`*)cl0d96>!Y2EWIhgAcPP4=Aq=h2Hvgb!?aNVfO#`%8I+75e zkv6Qw49d_B=&qha1`ApBlO!6c)c+(S(a32F1)9SC;z|7{gr%`X!chqeH&j0tCwpE7 zP2}6`Sgmx_f52PMyjkjXS=xOH-aqY|Sh9t|0j!9STdJ)TkQZnsy5j<;T%lG80bP$c zh!|`rZ0TgsLb}u1cbuctf-Tjpn}=u#VZ3>7G3~KC(%e7#sQLf95{A1HXzH>^_l4<5 zus%_lWca_F^fqq{6ssqbPBM~Ru-r%=X81~wq>aE$KU}qp`xiVVQe?k6Whz9~}ajv2yZIJX$j-lrG z8lLs8A2S&2#zMgKdi6yt^VZA%70;@Wc_QC~-rwlxe@n|;sG?~mY_maWwn+%bP$YF5 z(tm3of7J*`pB!iS4f=Ew`KPpm5bA!9H^eJJD)GLwai?qbol44{O+DdQ9V@)GU^lp$ z*62Z-+az%)6Ujq*qDwu2+x|Na@!h-XC;X~94*uwL@`u(z{s(z5tMJx19bV&{6Mt3+ zCx?sVmNs5-c8g6Nhv;dChYn6L5bJT!vBM^wf2=awMr!vJW~hgeING=Ge+t~Nf8TA> z&+@Y9bbFg74E6T@SdH=YuIGR>kFTxniCR{-c#DCxNd327iK8DK1v?}?8mALU`U_Tc zW{kgAg})2)8iaL zK5Tl|Xb>HBCuX~Y!pbY24BirO9VrzEVAjNPNXvG#we!)(vBjvMrLdVtb? zuP-%+jDJFZkm0J8CHt4X!GNJkW-XX>0$<$H6>9t z5n2>TDo#@L-{)SEdfBo&nHou}puM^z&wWwnMAiCly4GK-x-sNBAlGTeN~swBivYVJ4qK&0l!6PDv(J!4#VAox_f058RyeIkx`CMKpxrPOPQohRZ4?iV14? zBfG!&aWQ}LOlgjG4^cKo@QS6RlGULvi44R!jE2@Vql#8JEHUiKl$?oT9Lx!qjOGt( zC7Y@Ub19@s$!^09oQv5yd};GHIKibaB}x56v=qD`1y!&iefB$GsyDQdJLiLb_{2o; z^~Rth;gx2_xo@dj^C~p5PRX+NC8=pq*jmkCAv}N1RX#FR3b_lPQ$iaf_pDDT+3=!Z zm9y`l%;8Q^*f&#*K7?p+uS!`NYzIhRvcTQA zhOO2ay<7&#d=<Dr;UjY;ND;P!)}_C*w5dz_2R;CttFh4tr!f|VvEwj!9`g6mpPC^oNfJi<)K{J|mgGpuOA z8=YdZoqfZw$5Jwb)H{n^*_xARK3qR+VyM$)aytu1`^%RJ8jiw-2+c3;#s}sb7R?qh zR2HhcTwdLiPuJv|D4^ryPBW#+^{2hDO5J~jgs`XzVHyg~Dsu__9}w3pgAIe^io_oR zZ;$7}Y`(;U(7w2BUnDn4FiR`~e38WQ2Z!X#mw9yaaT0^?-0pmbC$Mo63kD;GyV4lB z4T!xcpwhCw1U$B<$1tx(K8VdZjWCa$5U2AR2XN)Uf8Hp$Wx-#xq>3+2M)9g-PT+sC zxwQ5%l0hmRnk4?{0WG6s8j=j(0L{0WDN2$g0zi}H-Rif1@%8s3=O3n^>!f2n{{PDI z&-^pSKYfA22Pe`@u-tT)c>j6x!@FDr$=xkJXBysq!}0KM%-eo(yIL)gW{(ZyI z9f2HAB_eaR7$F`z^`kq4f8N0zVZ?u1Z~~Rhqqk3{@l0cT7A(Iyv}XbF3nP1$^Zme1 zGZJ0X%5wyyXz+PP7WM8ACLWpLIVFFxhP?|&X9&n|ic=8~O)DM32bY&e$Q;QU_>#4| zA26Pl)H(u=AT}1R{sp>-k$tGTy28(DVkkn`7LtX zj;Xc$s;6BCwCU^xwIQWx2%oxK0GINO(~-tjON|6tgt{S@+gdQws;_AU(rGxFfy!xG zebiCoJBT0Bjmhd;r4>}~%MyPY(Z2J^Mk(OblD)3tfcU@BtknZkVge-*un_p=m&HLG z^h-Kv+p2-n{v+XV+I7bZvw;Bwj^+Y+33*j8&{(V0YNE?Vd2K|boAsJ$RKcxsZClDG ztxKf;|9_Pdql54R-yP%|pxf9gFql1u-)g>+Zn*$K@!Bf|D~X&Y>>7W)Q$~~1kD|OC z>0UWlnH|CbPrlZ^x0008ZPm{_SFd&f$hC?k@mV@5}0065I000pH000000000000000 Q8Woco8Y2cc8UO$Q0Q#r{7XSbN delta 6628 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' + - '
    ' + + '
    ' + '
      ' + '
    • ' + ' {{ tag }}' + @@ -226,17 +226,24 @@ angular.module('tags-input').directive('tagsInput', function($timeout, $document } } }) - .on('blur', function() { - if (!scope.options.addOnBlur) { + .on('focus', function() { + if (scope.hasFocus) { return; } - + scope.hasFocus = true; + scope.$apply(); + }) + .on('blur', function() { $timeout(function() { var parentElement = angular.element($document[0].activeElement).parent(); - if (parentElement[0] !== element[0] && scope.tryAdd()) { + if (parentElement[0] !== element[0]) { + scope.hasFocus = false; + if (scope.options.addOnBlur) { + scope.tryAdd(); + } scope.$apply(); } - }, 0); + }, 0, false); }); element.find('div').on('click', function() { diff --git a/test/tags-input.spec.js b/test/tags-input.spec.js index 8a96ac44..f99bb648 100644 --- a/test/tags-input.spec.js +++ b/test/tags-input.spec.js @@ -151,6 +151,77 @@ describe('tags-input-directive', function() { expect(element.find('div').hasClass('myClass')).toBe(true); }); }); + + describe('focus outline', function() { + beforeEach(function() { + compile(); + }); + + it('outlines the tags div when the focused property is true', function() { + // Arrange + isolateScope.hasFocus = true; + + // Act + $scope.$digest(); + + // Assert + expect(element.find('div.tags').hasClass('focused')).toBe(true); + }); + + it('does not outline the tags div when the focused property is false', function() { + // Arrange + isolateScope.hasFocus = false; + + // Act + $scope.$digest(); + + // Assert + expect(element.find('div.tags').hasClass('focused')).toBe(false); + }); + + it('sets the focused property to true when the input field gains focus', function() { + // Arrange + isolateScope.hasFocus = false; + spyOn($scope, '$digest'); + + // Act + getInput().triggerHandler('focus'); + + // Assert + expect(isolateScope.hasFocus).toBe(true); + expect($scope.$digest).toHaveBeenCalled(); + }); + + it('sets the focused property to false when the input field loses focus', function() { + // Arrange + var body = $document.find('body'); + body.append(element); + body.focus(); + + isolateScope.hasFocus = true; + spyOn($scope, '$digest'); + + // Act + getInput().triggerHandler('blur'); + $timeout.flush(); + + // Assert + expect(isolateScope.hasFocus).toBe(false); + expect($scope.$digest).toHaveBeenCalled(); + }); + + it('does not trigger a digest cycle when the input field is focused already', function() { + // Arrange + isolateScope.hasFocus = true; + spyOn($scope, '$digest'); + + // Act + getInput().triggerHandler('focus'); + + // Assert + expect($scope.$digest).not.toHaveBeenCalled(); + }); + }); describe('tabindex option', function() { it('sets the input field tab index', function() { @@ -371,24 +442,22 @@ describe('tags-input-directive', function() { }); describe('option is true', function() { - var anotherElement; + var body; beforeEach(function() { compile('add-on-blur="true"'); - anotherElement = angular.element('
      '); - $document.find('body') - .append(element) - .append(anotherElement); + body = $document.find('body'); + body.append(element); }); it('adds a tag when the input field loses focus to any element on the page but the directive itself', function() { // Arrange isolateScope.newTag = 'foo'; - anotherElement[0].focus(); + body.focus(); // Act - getInput().trigger('blur'); + getInput().triggerHandler('blur'); $timeout.flush(); // Assert @@ -398,10 +467,10 @@ describe('tags-input-directive', function() { it('does not add a tag when the input field loses focus to the directive itself', function() { // Arrange isolateScope.newTag = 'foo'; - element.find('div')[0].focus(); + element.find('div').focus(); // Act - getInput().trigger('blur'); + getInput().triggerHandler('blur'); $timeout.flush(); // Assert @@ -416,7 +485,7 @@ describe('tags-input-directive', function() { isolateScope.newTag = 'foo'; // Act - getInput().trigger('blur'); + getInput().triggerHandler('blur'); // Assert expect($scope.tags).toEqual([]); diff --git a/test/test-page.html b/test/test-page.html index d07a3dc0..35a955c1 100644 --- a/test/test-page.html +++ b/test/test-page.html @@ -10,7 +10,7 @@ + add-on-blur="true">