iOS Safari textarea placeholder 줄바꿈 안되는 이슈

현상

React.js useRef 방식으로 입력값을 관리하는 textarea 엘리먼트에 iOS Safari 환경에서, 글을 썼다가 다 지웠을 때 placeholder가 처음에 1줄로 보이고 백스페이스 버튼을 한 번 더 눌러야 정상적으로 줄바꿈돼서 출력됨.

원인

textarea 렌더링을 하지 않는 거 같음

해결

• 눈에 보이지 않지만 렌더링을 유발하는 스타일을 적용함 (예: opacity)
• useState 방식으로 하기

예시

const currentKey = useRef<string>();
const [textareaStyle, setTextareaStyle] = useState({ opacity: 1 });

function handleMobileOldSafariPlaceholderRenderingIssue() {
  if (currentKey.current === 'Backspace' && textareaRef.current?.value === '') {
      setTextareaStyle({ opacity: 0.99 });
  setTimeout(() => {
    setTextareaStyle({ opacity: 1 });
  }, 0);
}
}

function submitWhenMetaEnter(e: KeyboardEvent) {
  if (e.metaKey && e.key === 'Enter') {
    e.preventDefault();
    handleReviewSubmit(e);
  }

  currentKey.current = e.key;
}

<textarea
  css={styles.textareaStyle}
  placeholder={`리뷰를 ${MINIMUM_REVIEW_LENGTH}자 이상 입력해 주세요. 광고 및 욕설, 타인을 비방하는 문구는 비공개될 수 있습니다.`}
  ref={textareaRef}
  defaultValue={myReviewContent}
  onKeyDown={submitWhenMetaEnter}
  onInput={handleMobileOldSafariPlaceholderRenderingIssue}
  style={textareaStyle}
/>