[React Native] numeric타입 키보드에서 onSubmitEditing함수가 동작하지 않음

1. 개요

키보드의 "다음"버튼을 클릭시 다음 입력 필드로 focus 이동을 구현하던중 발생한 일이다.

기본적으로 TextInput의 props인 onSubmitEditing을 이용해 이를 구현했었는데 이상하게도 이번에는 동작이 되지 않았다.(무반응)

특이한점은, keyboardType을 numeric으로 했을 때만 이 문제가 발생한다는 것이었다.

 

2. 원인

React Native가 원인이었다.

작성일 기준 React Native의 가장 최신버전인 0.76.x버전을 이용하고 있는데, 이 버전에서만 numeric키보드의 onSubmitEditing함수가 동작하지 않는 문제가 있는 것이다.

https://github.com/facebook/react-native/issues/48259

[iOS][NewArch] Numeric TextInput not triggering onSubmitEditing · Issue #48259 · facebook/react-native

 

개발자 노트에 따르면 0.76버전에서 새 아키텍쳐가 적용되며 코드를 전체적으로 리팩토링했다고 하는데, 이 과정에서 해당 기능이 누락된것이 아닐까 추측된다.

 

3. 해결 방법

추천되는 방법은 0.77버전으로 업그레이드 하는것이다.

하지만 작성일 기준 0.77버전은 아직 rc버전이고, 현재 서비스중인 서비스를 rc버전으로 바꾸는건 리스크가 있다 판단해 다른 방법을 찾아보았다.

 

https://github.com/facebook/react-native/pull/48276

[iOS] Fabric: Fixes Numeric TextInput not triggering onSubmitEditing by zhongwuzw · Pull Request #48276 · facebook/react-nativ

다행히도 이 문제가 해결된 PR을 발견할 수 있었다.

node_modules/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.mm파일의 handleInputAccessoryDoneButton을 아래와 같이 수정하면 된다.

 - (void)handleInputAccessoryDoneButton 
 { 
   // Ignore the value of whether we submitted; just make sure the submit event is called if necessary. 
   [self textInputShouldSubmitOnReturn]; 
   if ([self textInputShouldReturn]) { 
     [self.backedTextInputView endEditing:YES]; 
   } 
 }

그리고 numeric타입 키보드에서 onSubmitEditing 대신, onEndEditing을 이용하면 문제를 해결할 수 있었다.

 

4. 마무리

이 문제는 전체적인 리팩토링에 따른 부작용이라 생각된다. 서비스의 전반적인 업데이트, 리팩토링을 한다면 반드시 QA테스트가 필요하고, 그 과정을 거치더라도 놓치는 부분이 발생할 수 있다는걸 느꼈다.

결국 이슈는 사용자단에서 발견이 될테고, 빠른 조치가 정말 중요하다는것도 다시한번 배웠다.

0.77버전에선 이 문제를 포함한 다른 이슈들도 해결됐을테니 조금 더 안정적이 되지 않을까 기대된다.