[ Quasar ] q-input mask 적용 후 입력 값 삭제 시 커서 이동 버그

 

mask를 사용할 때 QInput의 커서가 끝으로 이동하는 문제는 이미 quasar 버전 2.7에서 fix가 됐다.

근데 난 왜...?

 

내 코드에서는 QInput을 가지고 공통 컴포넌트를 만들었고, emits 이벤트를 통해 store의 값을 업데이트하다보니 계속해서 이런 오류가 반복되는 것 같다.

 

기존에는 vue 컴포넌트에 있는 데이터와의 연결을 위해 computed를 이용해 변수를 재정의해서 사용했다.

const inputValue = computed({
  get: () => {
    return props.value;
  },
  set: (value) => {
    emits('update:inputBoxValue', value);
  },
});

 

 

일단 computed를 더 이상 사용할 수 없다는 생각이 들어 get 부분은 ref로 set은 다른 부분으로 동작을 수정하기로 했다.

const inputValue = ref(props.value);

 

 

네 번의 트라이 끝에 원하는대로 동작하게 됐다.

 

 

1. @input 이벤트

이건 적용이 안 된다.

QSelect에서는 잘 됐어서, QInput에서도 잘만 적용하면 될 것 같았는데 아쉽지만 pass

 

 

2. @change 이벤트

좀 불안정하게 작동하는 것 같다.

또 이 방법의 단점은 unmasked-value 속성을 통해 mask된 콤마를 반환 데이터에는 나타나지 않도록 했었는데, change 이벤트를 사용할 경우 123,456,789 처럼 콤마까지도 문자열로 포함하여 같이 반환한다.

그러므로 원하는 value를 얻기 위해서는 한 번 더 처리가 필요하다.

 

 

3. debounce

처음에는 잘 동작하는 것처럼 보였으나 이상하다.

우선 debounce이기 때문에 동작이 조금씩 딜레이가 생긴다. 그래서 얼핏 커서가 잘 움직이는 것처럼 보이지만 계속 보다보면 마치 버그에 걸린 것처럼 오작동한다.

그래서 얘도 폐기

 

 

4. @blur

마침내 파이널리 찾아낸 해결방법

blur 함수는 QInput에서 제공하는 이벤트로 포커스 아웃됐을 때 동작을 수행한다.

사실 이 함수 자체가 해결의 키워드인 것은 아니다.

 

바로 emit 이벤트의 수행 시점을 변경해준 것이 해결방법이다.

처음에 props.value를 초기값으로 받고 → 컴포넌트 내부의 input 입력이 있을 때는 inputValue만 변경된다. (이때 커서는 정상적으로 작동된다) → 모든 입력이 완료되어 포커스 아웃됐을 때 emit 이벤트를 실행시켜 vue 파일의 원 데이터도 수정을 해준다.

 

※ 모든 Input은 Calculate를 위해 존재하고, 이를 수행하기 위해 버튼을 반드시 누른다. → 이 때 무조건적으로 포커스 아웃 발생 (즉, 데이터를 정상적으로 변경하여 이후 요청을 보낼 수 있다)

 

@blur="emits('update:inputBoxValue', inputValue)"

• mask 속성 활용 가능 (콤마 표현 가능)
• unmasked-value 속성 활용 가능 (실제 value는 콤마가 없는 문자열로 사용 가능)
• cursor 정상적으로 작동

 

---

[ 참고 자료 ]

https://quasar.dev/vue-components/input/

https://github.com/quasarframework/quasar/issues/13095