Merge pull request #2132 from traPtitech/fix/complete-without-suggest…

…ion-list 補完候補が表示されていないときに補完ができていた
traPtitech · Apr 30, 2021 · f157b9d · f157b9d
2 parents b10995f + 8a639b8
commit f157b9d
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/src/components/Main/MainView/MessageInput/use/wordSuggester.ts b/src/components/Main/MainView/MessageInput/use/wordSuggester.ts
@@ -12,6 +12,12 @@ export type WordOrConfirmedPart =
       text: string
     }
 
+/**
+ * 補完を表示する最小の文字数
+ * 3なら`@ab`のときは表示されて`@a`では表示されない
+ */
+const MIN_LENGTH = 3
+
 const useWordSuggester = (
   textareaRef: ComputedRef<HTMLTextAreaElement | undefined>,
   value: WritableComputedRef<string>
@@ -47,7 +53,7 @@ const useWordSuggester = (
     selectedCandidateIndex,
     prevCandidateText,
     nextCandidateText
-  } = useWordSuggesterList(target, currentInputWord)
+  } = useWordSuggesterList(target, currentInputWord, MIN_LENGTH)
 
   const { insertText } = useInsertText(value, textareaRef, target)
   const insertTextAndMoveTarget = (text: string) => {
@@ -59,7 +65,7 @@ const useWordSuggester = (
   const updateTarget = () => {
     if (!textareaRef.value) return
     target.value = getCurrentWord(textareaRef.value, value.value)
-    if (target.value.divided || target.value.word.length < 3) {
+    if (target.value.divided || target.value.word.length < MIN_LENGTH) {
       isSuggesterShown.value = false
       return
     }
@@ -73,6 +79,7 @@ const useWordSuggester = (
 
   const onKeyDown = (e: KeyboardEvent) => {
     if (e.isComposing) return
+    if (!isSuggesterShown.value) return
 
     // Tabによるフォーカスの移動を防止するため、長押しで連続移動できるようにするためにkeyDownで行う必要がある
     if (e.key === 'Tab') {
@@ -91,7 +98,6 @@ const useWordSuggester = (
       return
     }
 
-    if (!isSuggesterShown.value) return
     if (e.key === 'ArrowUp') {
       e.preventDefault()
       insertTextAndMoveTarget(prevCandidateText.value)

diff --git a/src/components/Main/MainView/MessageInput/use/wordSuggestionList.ts b/src/components/Main/MainView/MessageInput/use/wordSuggestionList.ts
@@ -78,13 +78,19 @@ const useCandidateTree = () => {
   return tree
 }
 
+/**
+ * @param minLength 補完が利用できるようになる最小の文字数
+ */
 const useWordSuggestionList = (
   target: Ref<Target>,
-  currentInputWord: Ref<string>
+  currentInputWord: Ref<string>,
+  minLength: number
 ) => {
   const tree = useCandidateTree()
   const candidates = computed(() =>
-    tree.value.search(target.value.word.replaceAll('＠', '@'))
+    target.value.word.length >= minLength
+      ? tree.value.search(target.value.word.replaceAll('＠', '@'))
+      : []
   )
   const confirmedPart = computed(() =>
     getDeterminedCharacters(candidates.value.map(obj => obj.text))