[React] Safari 환경에서 테스트 시 Select Box Option 텍스트가 노출 안되는 이슈

QA를 진행하며, Safari 환경에서 테스트 시 Select Box Option 텍스트가 노출 안되는 이슈가 있었다.

 

문제의 원인은 의외로 간단했는데 label을 option의 속성으로 지정해주어 생긴 이슈였다.

 

option의 라벨을 속성값이 아닌  option태그 안에 직접 넣어주어 해결할 수 있었다.

 

{options.map((option, index) => {
        let optionAttribute: IOptionProps
        if (typeof option === 'string') {
          optionAttribute = {
            key: option,
            label: option,
            value: index
          }
        } else {
          optionAttribute = option
        }

        return <option key={`option_${index}`} {...optionAttribute} value={index} />
      })}

위 코드를

 

     )}
      {options.map((option, index) => {
        return (
          <option key={`option_${index}`} value={index}>
            {typeof option === 'string' ? option : option.label}
          </option>
        )
      })}

 

이와 같이 변경하여 이슈를 해결하였다.