TIL 33 :: SelectBox <select>없이 구현하기

https://joodb.github.io/dropdown-selectbox/ 

HTML

문제. <select>, <option>이 아니다.

- 처음 구현할 때 당연히 <select>, <option>을 사용했을거라 예상하고 그렇게 만들어갔는데 전혀 아니었다. 중간에 저  margin으로 들어가야하는 부분이 구현되지 않는다. select와 option사이는 떨어트릴 수 없다. 이 부분을 몰라서 HTML만 두 번 만들었다. 

 

해결. 최애프로그래밍 언어 부분은 <button>, 아래 리스트는 <ul>로 만들고 <li> > <button>으로 만들었다. 

---

JS

처음에 만든 코드에서는 list 영역을 for문을 이용해 <button>하나하나에 접근했다. 

// selectBtn focus를 잃었을 때 list를 숨기고 삼각형 이미지의 각도를 원래대로 변경한다. 
selectBtn.addEventListener('blur', () => {
    contentsOption.classList.add('hide');
    document.documentElement.style.setProperty('--toggle-degree', '0deg');
});

for (const i of options) {
    i.addEventListener("mousedown",(e)=>{
        selectBtn.textContent = e.target.textContent;
        contentsOption.classList.add("hide");
        document.documentElement.style.setProperty('--toggle-degree', '0deg');
        document.getElementById('hiddenSelectOption').value = e.target.value;
    });
}

문제. 영역 바깥을 선택하면 리스트가 닫히지 않는다.

- options는 <li>안에있는 <button>하나하나를 접근하는 반복문이다. 

처음에는 click 이벤트를 주었는데 값이 넘어가기전에 리스트가 닫혀 버리는 상황이 반복 됐다. 

 

해결1. click 대신 mousedown 을 쓰자

 

이벤트가 발생하는 순서는 아래와 같다.

1. mousedown
2. blur
3. mouse up
4. click

순서에 따라 blur가 click이벤트보다 먼저 실행되기때문에 for문이 실행되기전 먼저 리스트가 숨겨지는것이다.  혹시나 저 순서가 차이가 있을까 의심될 수 도 있지만 for문이 위에 있다고해도 똑같이 실행되지 않았다. 그렇기에 blur보다 먼저 발생하는 mousedown을 쓰면 이 문제가 해결된다.  

 

참고) https://stackoverflow.com/questions/43355514/how-to-prevent-racing-between-click-and-blur-event/43356000#43356000

 

// list가 선택되면 selectBtn에 내용을 보여주고 리스트를 숨긴다. 
contentsOption.addEventListener('mousedown', (e) => {
    if(e.target.nodeName === "BUTTON") {
        selectBtn.textContent = e.target.textContent;
        contentsOption.classList.add("hide");
        document.documentElement.style.setProperty('--toggle-degree', '0deg');
        document.getElementById('hiddenSelectOption').value = e.target.value;
    }
});

문제 2. 버튼을 눌렀는데 닫힌다!

- 기존에는 <button>에 mousedown이벤트를 줬더니 문제1과 동일하게 값이 넘어가지않고 닫힌다.

 

해결 2. 이벤트를 줄 영역을 <button>이 아닌 <ul>로 변경하자

- <button>의 text는 nodeName 조건으로 BUTTON이 맞을 때만 실행될 것들을 넣어주었다. 

 

---

이번 과제를 통해 알게 된 것

💡 이벤트 발생 순서로 인해 원하는 이벤트가 발생되지 않을 수 있다.

💡 영역을 값이 들어간 부분 이외에도 더 크게 잡고 조건으로 값을 넘길 수 있다.