TIL - disabled button의 active interaction 막기

문제상황

사람이 생각하는 방식대로라면 button이 disabled 되어있으면 active interaction은 당연히 안되는 게 맞다. 그래서 당연히 되겠거니 하고 active 선택자의 css를 추가했지만, 내 생각대로 돌아가지 않았다.

키워드화하여 구글링하는 것도 쉽지 않았다. 이런 저런 단어 조합에는 그냥 disabled와 active 선택자에 대한 설명만 나왔으니 말이다. 안되겠다 싶어서 영어로 다음과 같이 작성하니, 드디어 궁금하던 부분을 찾을 수 있었다.

css button disabled active

문제 해결하기

첫 번째 시도 : enabled된 버튼에만 active 삽입하기

:active doesn't exclude :disabled elements.

내가 궁금하던 부분에 대해 딱 물어보던 스택오버플로우에서 발췌한 부분이다. 왜인지는 모르겠지만, active는 disabled 엘리먼트를 제외하지 못한다고 한다. 즉, 추가적인 설정을 해줘야 한다는 것이다. 그래서 스택오버플로우에 제시된 해결책들을 적용해봤다.

/* 방법1 */
button:enabled:active {
/* active css */
}

button:disabled {
  opacity: 0.5;
}

/* 방법2 */
button:active:not(:disabled) {
/* active css */
}

button:disabled {
  opacity: 0.5;
}

styled-component를 사용하고 있기 때문에 당연히 button이라고 쓰여진 부분은 제외하고 적용했지만, 예상대로 돌아가지 않았다. 처음엔 disabled 파트를 포함하지 않아서 그런가 싶었지만, 포함한다고 해서 달라지는 것은 없었다.

적용한 해결책 : props로 disabled 상태 받아오기

기존에 알고 있던 방법이지만, 거추장스럽다고 판단해 다른 방법을 찾아본 거였는데, 적용이 안되니 그냥 원래 하려던 대로 해야 했다.

// 버튼 부분
<SubmitButton
  disabled={!uploadValidation}
  isButtonEnabled={uploadValidation} //disabled의 반대값을 가져온다.
  onClick={() => {...}}
  >
  제출하기
</SubmitButton>

// styled-component
const SubmitButton = styled.button<{ isButtonEnabled: boolean }>`
  /* css code */

  :active {
	/* 버튼이 enabled 되었을 때만 active interaction이 동작하도록 한다. */
    ${({ isButtonEnabled }) =>
      isButtonEnabled &&
  ` 
    background-color: #8a8a8a;
    transform: translateY(2px);
    box-shadow: 0 5px 10px rgba(14, 10, 10, 0.2);
  `}
  }
`;

Reference

https://stackoverflow.com/questions/12591966/html-disabled-button-getting-active-css-pseudo-class