[Front] onFocus 이벤트

해당 svg 버튼을 눌렀을 때 탭창이 뜨게 구현하고자 함

javaScript
//초기 코드 일부

<div
                  className="relative justify-center items-center"
                  onBlur={() => {
                    setQuickTab(false);
                  }}
                  onClick={() => {
                    setQuickTab(!quickTab);
                  }}
                >
                  <svg
                    width="40"
                    height="40"
                    viewBox="0 0 40 40"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >

OnBlur 이벤트와 OnFocus 이벤트가 작동하지 않음

찾아보니
OnFocus 이벤트는 대화형 요소에만 작용함
대화형 요소 : a, button, details, input, select, textarea
이외의 요소들은 비대화형 요소이며ㅠ포커싱이 작동하지 않는다. (ex. div, span, ul ...)

=>

<button
                  className="relative justify-center items-center"
                  onBlur={() => {
                    setQuickTab(false);
                  }}
                  onClick={() => {
                    setQuickTab(!quickTab);
                  }}
                >
                  <svg
                    width="40"
                    height="40"
                    viewBox="0 0 40 40"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >

해당 svg를 감싸를 요소를 div에서 button으로 바꾸어주었더니 잘 작동함