가끔 폼 태그 활용할 때, 폼과 같은 레이어에 저장 등의 submit 버튼이 있는게 아니라, 저장 버튼 클릭하면 모달을 띄우고, 너 진짜 요 폼 제출할거야? 물어본 후 그 모달 안에 submit 버튼을 배치해서 폼을 제출하게 만드는 경우가 있음...!
그런데! 모달 컴포넌트를 만들 때 X버튼에다가 "type=button" 요걸 추가하는 걸 까먹으면... 모달에 저장 버튼 클릭 할 때는 잘 제출이 되는데, 엔터를 누르면 폼이 제출되지도 않고 그냥 모달이 꺼져버리는 요상한 일이 발생하게 됨...
더욱 이상한 점은 그냥 모달을 띄우고 엔터를 입력하면 모달이 종료되지 않는데, 인풋에 포커스를 하고 엔터를 누르면 모달이 종료된다는 점이었음...
암튼 삼십분 정도 트래킹하고 알게된게, X버튼에 "type=button" 추가 안해서였음...
그러다보니 당연하게, 만약 그냥 모달 키고 인풋에 포커스 안하면, 폼이 활성화 안됨, X버튼도 안눌림
그런데 모달 켜고 인풋에 포커스하면, 폼이 활성화 됨 이때 엔터치면, 가장 상단에 있는 X버튼이 submit 버튼으로 인지되어 클릭되고 모달꺼지는 것이었음...
이상~
부정확한 정보나 잘못된 정보는 댓글로 알려주시면 빠르게 수정토록 하겠습니다, 감사합니다!