angularjs 와 Button 태그간 ng-click 버그에 대하여

최근에 AngularJS 를 이용해서 작업을 하던 도중 알게된 작은 버그이다.

(참고로 버전은 AngularJS 1 버전이고, 크롬에서 발생한 버그이다.)

문제가 된 HTML 은 다음과 같다.

<button class="button btn-danger" ng-click="deleteElement($index)">

<span class="glyphicon glyphicon-remove" aria-hidden="true">Delete</span></button>

위의 코드는 단순히 버튼을 클릭하면 해당 Element 에 대한 정보를 이용해서 ng-click 이벤트를 발생시키는 HTML 코드이다.

이 코드는 아주 잘 작동하지만, HTML 에서 엔터키 입력 시, 아주 사소한 버그를 발견할 수 있었다.

위의 코드에서 같은 scope 로 묶인 Text Box 에서 엔터를 입력하자마자 맨 위 레코드가 삭제되는 버그를 발견하였다.

정확히는 Enter Key 를 입력받아 ng-click 이벤트가 작동한 것이다. 다만, 명시적으로 ng-click 이 호출되지 않은 탓에 Parameter인 $index 는 전달되지 않은듯 하다.

문제의 원인은 <button> 태그에 있었는데, 기본적으로 button 태그의 type 은 "submit" 형이기 때문에, 엔터키 입력에 반응할 수 있다.

(이는 브라우저 별로도 다소 다른 듯 하다.)

문제 해결을 위해서는 다음과 같이 명시적으로 타입을 지정해주면 간단히 해결된다.

<button type="button" class="button btn-danger" ng-click="deleteElement($index)">

<span class="glyphicon glyphicon-remove" aria-hidden="true">Delete</span></button>

혹은 어느정도 규모의 AngularJS 프로젝트를 운용중이라면 directive 로 묶어서 처리하는 것도 좋은 방법이다.

(참고자료 : http://www.jomendez.com/2015/02/16/prevent-ng-click-action-hitting-enter/)