Merge pull request #18 from newtextdoc1111/dev

Merge Dev

README.md

@@ -28,11 +28,16 @@
 
 ## Installation
 
+### ComfyUI-Manager
+
+1. Search for `Autocomplete-Plus` in [ComfyUI-Manager](https://github.com/Comfy-Org/ComfyUI-Manager), install the custom node that appears, and restart.
+2. The necessary CSV data will be automatically downloaded from HuggingFace upon startup.
+
 ### Manual
 
 1. Clone or copy this repository into the `custom_nodes` folder of ComfyUI.
    `git clone https://github.com/newtextdoc1111/ComfyUI-Autocomplete-Plus.git`
-2. Launch ComfyUI. The necessary CSV data will be automatically downloaded from HuggingFace on the first launch only.
+2. Launch ComfyUI. The necessary CSV data will be automatically downloaded from HuggingFace upon startup.
 
 ## Autocomplete
 
@@ -47,7 +52,7 @@ When you type in a text input area, tags that partially match the text are displ
 
 ![ss02](https://github.com/user-attachments/assets/854571cd-01eb-4e92-a118-2303bec0b175)
 
-When you select any tag in a text input area, highly related tags list are displayed. The UI's position and size are automatically adjusted based on the text area being edited.
+When you select any tag in a text input area, a list of highly related tags is displayed. You can insert a tag by clicking it or by selecting it with the up/down arrow keys and then pressing Enter or Tab. The UI's position and size are automatically adjusted based on the text area being edited.
 
 - The display position is primarily at the bottom of the text area and automatically adjusts vertically based on available space.
   - You can switch between vertical and horizontal display positions using the "↕️|↔️" button in the header.

docs/README_jp.md

@@ -26,11 +26,16 @@
 
 ## インストール
 
+### ComfyUI-Manager
+
+1. [ComfyUI-Manager](https://github.com/Comfy-Org/ComfyUI-Manager) で `Autocomplete-Plus` と検索して表示されたカスタムノードをインストールし、再起動します
+2. 起動時に必要な CSV データが HuggingFace から自動的にダウンロードされます
+
 ### マニュアル
 
 1. このリポジトリを ComfyUI の `custom_nodes` フォルダにクローンまたはコピーします  
     `git clone https://github.com/newtextdoc1111/ComfyUI-Autocomplete-Plus.git`
-3. ComfyUI を起動します。初回起動時のみ、必要な CSV データが HuggingFace から自動的にダウンロードされます
+2. ComfyUI を起動します。起動時に必要な CSV データが HuggingFace から自動的にダウンロードされます
 
 ## オートコンプリート
 
@@ -45,7 +50,7 @@
 
 ![ss02](https://github.com/user-attachments/assets/854571cd-01eb-4e92-a118-2303bec0b175)
 
-テキスト入力エリアの任意のタグを選択すると、関連性の高いタグを一覧表示します。UIは編集中のテキストエリアを基準に位置とサイズが自動で調整されます。
+テキスト入力エリアの任意のタグを選択すると、関連性の高いタグを一覧表示します。タグをクリックするか、キーボードの上下キーで選択後にEnterまたはTabキーでタグを挿入出来ます。UIは編集中のテキストエリアを基準に位置とサイズが自動で調整されます。
 
 - 表示位置は、テキストエリアの下部を基本とし、空きスペースに応じて上下に自動調整されます
   - ヘッダーの「↕️|↔️」ボタンで上下と左右の表示位置に切り替えられます

pyproject.toml

@@ -1,7 +1,7 @@
 [project]
 name = "comfyui-autocomplete-plus"
 description = "Autocomplete and Related Tag display for ComfyUI"
-version = "1.0.0"
+version = "1.0.1"
 license = {file = "LICENSE"}
 dependencies = ["",]
 

web/js/autocomplete.js

@@ -332,10 +332,11 @@ class AutocompleteUI {
         // Calculate caret position using the helper function (returns viewport-relative coordinates)
         this.#updatePosition();
 
-        // Highlight the first item
-        this.#highlightItem();
-
         this.root.style.display = 'block'; // Make it visible
+
+        // Highlight the selected item
+        // This function must be called after the route has been displayed, in order to scroll the highlighted item into view.
+        this.#highlightItem();
     }
 
     /**
@@ -826,7 +827,7 @@ export class AutocompleteEventHandler {
         this.keyDownWithModifier.set(event.key.toLowerCase(), event.ctrlKey || event.altKey || event.metaKey);
 
         // Handle autocomplete navigation
-        if (this.autocompleteUI && this.autocompleteUI.isVisible()) {
+        if (this.autocompleteUI.isVisible()) {
             switch (event.key) {
                 case 'ArrowDown':
                     event.preventDefault();
@@ -878,11 +879,11 @@ export class AutocompleteEventHandler {
 
         if (this.autocompleteUI.isVisible()) {
             switch (event.key) {
-                case "Escape":
+                case 'ArrowDown':
+                case 'ArrowUp':
                     event.preventDefault();
-                    this.autocompleteUI.hide();
-                    return; // Return here to prevent updateDisplay after hiding with Escape
-                // Other keys like Enter, Tab, Arrows are handled in keyDown.
+                    return; // Prevent redundant display updates
+
                 // For other character keys, Backspace, Delete, we fall through to updateDisplay.
             }
         } else {
@@ -894,9 +895,9 @@ export class AutocompleteEventHandler {
             }
         }
 
-        // If the event was not handled by the above (e.g. Escape, or ignored special keys)
+        // If the event was not handled by the above (e.g. Arrow keys, or ignored special keys)
         // and default action is not prevented, update the display.
-        // This will typically be for character inputs, Delete, or Backspace.
+        // This will typically be for character inputs, Delete, Backspace or IME composition.
         if (!event.defaultPrevented) {
             this.autocompleteUI.updateDisplay(event.target);
         }

web/js/related-tags.js

@@ -318,11 +318,13 @@ class RelatedTagsUI {
         this.#updateHeader();
         this.#updateContent();
         this.#updatePosition();
-        this.#highlightItem();
 
         // Make visible
         this.root.style.display = 'block';
 
+        // This function must be called after the content is updated and the root is displayed.
+        this.#highlightItem();
+
         // Update initialization status if not already done
         if (!autoCompleteData[TagSource.Danbooru].initialized) {
             if (this.autoRefreshTimerId) {