폼 내부에 input 필드를 사용해 구성하던 중, input 내부에서 유저가 입력을 다 하고, 엔터를 누르니 폼이 입력되는 현상이 발생했다.
as-is : input 내부에서 enter 클릭시, 해당 폼의 submit이 동작
to-be : input 내부에서 enter 클릭시, 해당 폼의 submit이 동작하지 않았으면 좋겠음.
심지어 현재 폼의 submit 버튼은 폼 내부에 있지 않고 lnb에 위치해 폼에 대한 상태를 공유하고 있지 않고, form ID로만 연결되어 있어서 별도의 조작이 불가능한 상태였다.
// lnb
<button form="new-form">
Submit
</button>
// form
<form id="new-form">
...
</form>그래서 button이 분리된 상태에서 submit을 컨트롤 할 방법을 찾아보기로 했다.
Enter시 어떤 이벤트에 의해 submit이 실행되는가
enter는 키니깐 키 이벤트가 실행되겠지 ㅎㅎ → 아님 ❌
submit버튼에 onKeyPress, onKeyDown 이벤트가 실행되는 타이밍에 콘솔을 찍게 했지만 아무 동작도 하지 않았다.
놀랍게도 폼 내부에서 엔트키를 누르는 경우, onClick이벤트가 실행된다.
그러니 우리는 onClick 이벤트에서 유저가 버튼을 클릭한건지, 아니면 엔터키에 의한 클릭인지 구분해야한다는 의미이다.
onClick의 이벤트 객체엔 detail이라는 속성이 있더라
유저가 버튼을 직접 눌렀을 때와 엔터를 입력한 뒤의 각각 이벤트 객체를 뜯어보았다.
다른 곳에는 큰 차이가 없었는데, detail 속성이 각각 다르게 나타난 것을 확인 할 수 있었다.
엔터 입력시 : detail = 0
유저가 버튼 클릭시 : detail = 1
detail 속성은 클릭 이벤트에서는 유저가 클릭 한 수만큼 증가하고, mouseup/down 이벤트에서는 클릭수 + 1 의 값을 가진다. 그리고 이외의 이벤트에서는 0을 나타낸다.
그래서 유저가 직접 클릭한 경우에만 값이 1이 되고 (혹은 그 이상), 엔터를 통해 제출된 경우에는 0인 값이 나왔던 것이었다.
따라서 detail값이 0인 경우에는 제출을 막아 원하는 폼 형태를 만들 수 있었다.
<button
form="new-form"
onClick={(ev) => {
if (ev.detail === 0) {
ev.preventDefault();
}
}}
>
Submit
</button>