onClick시 onBlur이벤트가 먼저 실행되는 이슈해결 mui textfield adornment

서론

정말 몇날 며칠을 디버깅했지만 해결 안되는 이슈가 있었다... 

Mui 프레임워크 자체의 문제인걸까? 하고 Textfield 컴포넌트를 아예 다른 컴포넌트로 갈아엎기 전 마지막으로 한번만 더 디버깅해보자 했는데 오늘 진짜 어이없게 이슈가 해결되었다... 내가 이것때문에 몇일을 고생했다고.... 😭

 

사내 프로젝트는 리액트 ui 컴포넌트 라이브러리로 MUI를 사용한다.

MUI 공식문서에서 표현되어있는대로, 인풋박스를 Textfield 컴포넌트로 표현하고, input 박스 오른쪽 끝에있는 x 버튼은 InputProps의 endAdornment 속성으로 감싸주어 구조를 잡았다. 

 

     <TextField
        label='이름'
        InputProps={{
          endAdornment: (
            <InputAdornment position='end'>
              {nameValue.length > 0 && isNameFocused && (
                <IconButton
                  size='small'
                  onClick={onClickClearNameValue}
                  edge='end'>
                  <CancelIcon />
                </IconButton>
              )}
            </InputAdornment>
          )
        }}
       />

 

Expected Behaviour

인풋박스를 누르면 focus 처리되고, 인풋박스의 바깥 영역을 누르면 blur 처리된다.

바깥 영역을 누르는 블러처리 상태에서는 input 밑에 있는 helper text 및 인풋 오른쪽 안 x 버튼은 보이지 않는다.

인풋 안에 있는 x버튼을 누르면 인풋 안에 내용이 초기화가 된다. 

 

Current Behaviour

문제는 x 버튼을 누르면 IconButton에 바인딩한 onClickClear 함수가 실행이 전-혀 안된다.

이상하게 onBlur 함수만 실행되어서 input 내용이 지워지는게 아니고 그냥 focus out 처리된다. (정확히 말하면 blur 처리된다.)

 

+ 참고

focus out과 blur 이벤트는 포커스를 잃게하는 기능을 하지만, 정확히 말하면 focus out은 DOM 요소의 버블링이 발생하고 blur는 발생하지 않는다. 리액트에서는 focus out 이벤트 대신에 blur 이벤트 사용을 권장한다. 같은 맥락으로 포커싱을 잡을때는 focus in 대신에 focus 이벤트가 사용된다. (애초에 코딩 자동완성 해줄때 쓸 수 있는 이벤트 함수에 onFocusIn onFocusOut은 존재하지않고 onFocus와 onBlur 밖에 없다.)

 

 

 

처참한 상황... 

gif 캡쳐뜨면서 마우스 위치가 잘 보이지 않는데, x 버튼을 누르면 인풋 내용이 사라지는게 아니고 Blur 이벤트가 실행되서 포커싱 아웃 처리가 되는 상황이다.

x 버튼을 누르면 Blur 함수만 실행되고 있다는 걸 콘솔으로 확인할 수 있다.

 

 

위 상황의 코드는 간단히 아래와 같다. 

 

export const NameInput = (props: Props) => {
  const [nameValue, setNameValue] = useState('');
  
  const handleChangeNameValue = (e: React.ChangeEvent<HTMLInputElement>) => {
    setNameValue(e.target.value);
  };

  const handleClickClearNameValue = (e: React.MouseEvent) => {
    console.log('clear 함수동작');
    setNameValue('');
  };
  
   const [isNameFocused, setIsNameFocused] = useState(true);
   const nameInputRef = useRef<HTMLInputElement>(null);

  const handleNameInputFocus = () => {
    console.log('Focus 함수');
    nameInputRef.current?.focus();
    setIsNameFocused(true);
  };

  const handleNameInputBlur = () => {
    console.log('Blur 함수');
    nameInputRef.current?.blur();
    setIsNameFocused(false);
  };

  return (
      <TextField
        id='nameInput'
        variant='filled'
        label='이름'
        fullWidth
        InputProps={{
          endAdornment: (
            <InputAdornment position='end'>
              {nameValue.length > 0 && isNameFocused && (
                <IconButton
                  onClick={handleClickClearNameValue}
                  edge='end'>
                  <CancelIcon />
                </IconButton>
              )}
            </InputAdornment>
          ),
        }}
        autoFocus
        inputRef={nameInputRef}
        onFocus={handleFocusNameInput}
        onBlur={handleBlurNameInput}
        value={nameValue}
        onChange={handleChangeNameValue}
      />
)

 

여러가지 고민과 시도를 해봤었다.

• div 인풋 박스 
  • input 인풋
  • button 아이콘버튼

textfield 구조가 이런식이고, x버튼이 가장 상위 인풋 박스 div 하위에 있는 자식이니 input에 포커스하는 onFocus 이벤트에서 하위자식까지 캡처링을 일어나게하는 onFocusCapture를 적용해야되나? 예상대로 되지않음

뭔가 mui 자체에서 순수 input 영역을 제외한 영역을 모두 블러처리해서 adornment 영역까지 블러처리 해버리는 버그인가..? 구글링해봤지만 관련 케이스 무.. 

 

Fix1.

결국 문제는 버튼을 누르면 onClick 이벤트 발생이 안되고 onBlur 이벤트가 발생한다는 것.

두 키워드를 주제를 잡고 구글링하니 순식간에 해결이 되었다.

이 주제로는 구글링 자료가 많고 stackoverflow에도 많이 논의되는 주제였는데, 바로 문제는... onClick 이벤트와 onBlur 이벤트의 실행 순서에 있었다. 

onBlur 이벤트가 onClick 이벤트 보다 항상 먼저 실행되서 생기는 문제이다. 

해결책은 onClick 이벤트 대신에 onMouseDown 이벤트를 사용하면 해결된다는 것이다. 

 

MDN에서 명시되어있는대로 click 이벤트는 mousedown -> mouseup -> click 이벤트 순서대로 발생한다. 

click fires after both the mousedown and mouseup events have fired, in that order.

따라서 blur 이벤트를 뒤에 발생시키고, 클릭이 먼저 되게 하고 싶으면, mousedown 이벤트로 처리해주면 된다.

 

              <IconButton
                  onMouseDown={handleClickClearNameValue}   <--- HERE
                  edge='end'>
                  <CancelIcon />
                </IconButton>

 

onMouseDown 이벤트로 바꿔주면 끝. 

 

 

 

이제 clear 함수가 blur 함수 이전에 호출되면서 인풋 내용을 잘 지우는 것을 확인할 수 있다.!!! 🎉

하지만...

기쁨도 잠시...

자, clear 함수가 실행되면 우리가 원하는건 인풋 내용을 지우고, 포커스가 인풋에 그대로 남아있길 원한다. 그래야 다른 내용을 계속 쓸수 있으니까.

 

 

그런데 지금보면 clear 함수가 실행되고 바로 그 뒤에 blur 함수가 실행되어 포커스가 사라지는 것을 확인할 수 있다. 

이건 어떻게 해결할까? 

 

Fix2.

clear 함수가 실행되고, blur함수가 실행되는 것을 막으면 된다. 

mousedown 이벤트는 blur 이벤트와 함께 쓰일때 기본값으로 blur 이벤트를 발생시키므로, 이벤트의 기본동작을 취소하기위해 이벤트 객체의 preventDefault() 메서드를 사용해서 blur 함수 이벤트를 막는다. 

 

  const handleClickClearNameValue = (e: React.MouseEvent) => {
    e.preventDefault();           <-------- HERE
    console.log('clear 함수동작');
    setNameValue('');
  };

 

 

 

이제 x버튼을 누르면 clear 함수까지만 동작하고 포커스는 그대로 인풋에 남아 있음을 확인할 수 있다.

 

 

전체코드 

export const NameInput = (props: Props) => {
  const [nameValue, setNameValue] = useState('');
  
  const handleChangeNameValue = (e: React.ChangeEvent<HTMLInputElement>) => {
    setNameValue(e.target.value);
  };

  const handleClickClearNameValue = (e: React.MouseEvent) => {
    e.preventDefault();
    console.log('clear 함수동작');
    setNameValue('');
  };
  
   const [isNameFocused, setIsNameFocused] = useState(true);
   const nameInputRef = useRef<HTMLInputElement>(null);

  const handleNameInputFocus = () => {
    console.log('Focus 함수');
    nameInputRef.current?.focus();
    setIsNameFocused(true);
  };

  const handleNameInputBlur = () => {
    console.log('Blur 함수');
    nameInputRef.current?.blur();
    setIsNameFocused(false);
  };

  return (
      <TextField
        id='nameInput'
        variant='filled'
        label='이름'
        fullWidth
        InputProps={{
          endAdornment: (
            <InputAdornment position='end'>
              {nameValue.length > 0 && isNameFocused && (
                <IconButton
                  onMouseDown={handleClickClearNameValue}
                  edge='end'>
                  <CancelIcon />
                </IconButton>
              )}
            </InputAdornment>
          ),
        }}
        autoFocus
        inputRef={nameInputRef}
        onFocus={handleFocusNameInput}
        onBlur={handleBlurNameInput}
        value={nameValue}
        onChange={handleChangeNameValue}
      />
)

 

결론

난 프런트 개발자니까 정말 실무에서 제대로 쓰려면 이벤트랑 DOM 을 더 깊이 알아야된다는 걸 뼈저리게 느낌.

코드 한 줄 아니 진심 한 단어만 고치니 며칠을 고민한 이슈가 한번에 사라져서 좀 허무하기도 했지만.. CTO님 한테도 리포트한 이슈였단 말이여... 

해결되는 순간의 희열이 또 코딩의 묘미인 것 ... 즐거웠따. 

 

References

https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event

https://www.w3schools.com/jsref/event_onmousedown.asp

https://coffeeandcakeandnewjeong.tistory.com/70