[FE] 모바일 환경에서 멤버 추가 시 전에 입력한 이름의 끝자리가 입력되는 문제

[Todari]

issue

• close [FE] 모바일 환경에서 멤버 추가 시 전에 입력한 이름의 끝자리가 입력되는 문제 #619

구현 목적

행사 생성 단계에서 멤버를 입력할 때 전에 입력한 이름이 같이 나옵니다.
예를 들어, 쿠키를 입력하고 토다리를 입력하려고 하면 "키토다리"와 같이 입력됩니다.
유저 편의성을 위해 이를 해결하려고 합니다.

구현 사항

기존에는 keyboard event에서 isComposing인 경우, return을 해주기 때문에, composing인 경우 를 건너 뛰는 방식을 사용했습니다.
하지만 일부 환경에서 제대로 작동하지 않아서 이를 위해 inputRef 초기화를 해주기 위한 focus와 blur를 해주는 방식을 사용했습니다.

before

// useMembersStep.tsx
// ...
  const handleNameInputEnter = (event: React.KeyboardEvent<HTMLInputElement>) => {
    if (event.nativeEvent.isComposing) {
      return;
    }
    if (event.key === 'Enter' && canAddMembers) {
      event.preventDefault();
      if (!billInfo.members.map(({name}) => name).includes(nameInput)) {
        setBillInfoMemberWithId(nameInput);
      }
      setNameInput('');
    }
  };
// ...

after

// useMembersStep.tsx
// ...
  const handleNameInputEnter = (event: React.KeyboardEvent<HTMLInputElement>) => {
    if (event.key === 'Enter' && canAddMembers) {
      event.preventDefault();
      if (!billInfo.members.map(({name}) => name).includes(nameInput)) {
        setBillInfoMemberWithId(nameInput);
      }
      setNameInput('');
      if (inputRef.current) {
        inputRef.current.blur();
        setTimeout(() => inputRef.current?.focus(), 0);
      }
    }
  };
// ...

참고사항

모바일 환경에서 확인할 수 없어 최대한 데스크탑에서 재현이 가능한 isComposing을 확인 후 적용한 것이라 배포 후 한번 더 체크를 해줘야 할 것 같아용

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-iybqugmxxv.chromatic.com/