[CSS] input 태그 선택이 안될 때 해결법

1. 글을 쓰는 이유

프로젝트를 진행하다 <input>을 이용하여 사용자의 입력을 받아오는 기능을 구현하고 있었는데, <input> 입력 폼을 아무리 눌러도 focus가 되지 않았다. submit 버튼 또한 아예 눌러지지 않았다. 이를 해결하기 위해 검색을 통해 알아보고 잊어버리지 않기 위해 기록한다.

2. 발생 원인

1. event.preventDefault()
2. z-index

알아보니 발생 원인으로는 두 가지가 있을 수 있다고 한다.(다른 원인도 있을 수 있다😂)

2-1. event.preventDefault()

처음 의심 했던 원인으로는 첫 번째 경우였다. event.preventDefault()는 기본적으로 수행되는 이벤트, 예를 들면 submit 버튼을 누르면 페이지가 자동 새로고침 되는 기본적으로 탑재되어있는 이벤트를 막기 위해 사용된다.
나도 마찬가지로 submit 버튼을 누르면 새로고침이 되는 것을 원하지 않았기에 preventDefault()를 사용했다. 하지만 이것 때문에 <input> 폼이 클릭이 안된다는 것이 논리적으로 맞지 않다고 생각하였고 결론적으로도 맞지 않았다.

2-2 z-index

처음에 z-index를 의심하지 않았던 이유가 z-index가 낮아서 발생한 것이었다면 <input> 폼이 아예 보이지 않아야 한다고 생각했기 때문이다. 하지만 반전이었다.👍 원인은 z-index 였다. 보이긴 하더라도 z-index 값에 따라 focus가 되고 안되고를 결정 할 수 있다는 것을 깨달았다.

3. 해결 방법

<form>를 감싼 <div>의 z-index값을 아낌없이 높여주었다.
(1000으로,,😁)