Skip to content

feat: auto-focus the searchbox in asset dropdowns#7554

Merged
jtydhr88 merged 1 commit intomainfrom
asset-dropdown/search-focus
Dec 16, 2025
Merged

feat: auto-focus the searchbox in asset dropdowns#7554
jtydhr88 merged 1 commit intomainfrom
asset-dropdown/search-focus

Conversation

@christian-byrne
Copy link
Contributor

@christian-byrne christian-byrne commented Dec 16, 2025

Summary

On the assets dropdown in Vue Nodes loader nodes (e.g., Load Checkpoint, Load Video, Load Image), focus the search box first.

┆Issue is synchronized with this Notion page by Unito

@christian-byrne christian-byrne requested a review from a team as a code owner December 16, 2025 13:13
@dosubot dosubot bot added the size:XS This PR changes 0-9 lines, ignoring generated files. label Dec 16, 2025
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Dec 16, 2025

📝 Walkthrough

Walkthrough

Added an autofocus attribute to the search input element in the FormDropdownMenuActions component, enabling automatic focus when the component renders. This is a UI enhancement to the form dropdown menu.

Changes

Cohort / File(s) Summary
Form Dropdown Menu
src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
Added autofocus attribute to the search input element for automatic focus on component render.
✨ Finishing touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch asset-dropdown/search-focus

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions
Copy link

github-actions bot commented Dec 16, 2025

🎨 Storybook Build Status

Build completed successfully!

⏰ Completed at: 12/16/2025, 01:14:58 PM UTC

🔗 Links


🎉 Your Storybook is ready for review!

@github-actions
Copy link

github-actions bot commented Dec 16, 2025

🎭 Playwright Test Results

⚠️ Tests passed with flaky tests

⏰ Completed at: 12/16/2025, 01:22:57 PM UTC

📈 Summary

  • Total Tests: 505
  • Passed: 493 ✅
  • Failed: 0
  • Flaky: 3 ⚠️
  • Skipped: 9 ⏭️

📊 Test Reports by Browser

  • chromium: View Report • ✅ 481 / ❌ 0 / ⚠️ 3 / ⏭️ 9
  • chromium-2x: View Report • ✅ 2 / ❌ 0 / ⚠️ 0 / ⏭️ 0
  • chromium-0.5x: View Report • ✅ 1 / ❌ 0 / ⚠️ 0 / ⏭️ 0
  • mobile-chrome: View Report • ✅ 9 / ❌ 0 / ⚠️ 0 / ⏭️ 0

🎉 Click on the links above to view detailed test results for each browser configuration.

@github-actions
Copy link

Bundle Size Report

Summary

  • Raw size: 17.1 MB baseline 17.1 MB — 🔴 +27 B
  • Gzip: 3.38 MB baseline 3.38 MB — 🔴 +15 B
  • Brotli: 2.6 MB baseline 2.6 MB — 🔴 +33 B
  • Bundles: 98 current • 98 baseline • 40 added / 40 removed

Category Glance
UI Components 🔴 +27 B (184 kB) · Vendor & Third-Party ⚪ 0 B (8.56 MB) · Other ⚪ 0 B (3.75 MB) · App Entry Points ⚪ 0 B (3.25 MB) · Graph Workspace ⚪ 0 B (991 kB) · Panels & Settings ⚪ 0 B (298 kB) · + 3 more

Per-category breakdown
App Entry Points — 3.25 MB (baseline 3.25 MB) • ⚪ 0 B

Main entry bundles and manifests

File Before After Δ Raw Δ Gzip Δ Brotli
assets/index-Cb9MF5u6.js (new) 3.02 MB 🔴 +3.02 MB 🔴 +628 kB 🔴 +478 kB
assets/index-DXrpFgN-.js (removed) 3.02 MB 🟢 -3.02 MB 🟢 -628 kB 🟢 -478 kB
assets/index-FR3X24Za.js (new) 227 kB 🔴 +227 kB 🔴 +48.6 kB 🔴 +39.8 kB
assets/index-H3-bmBNz.js (removed) 227 kB 🟢 -227 kB 🟢 -48.6 kB 🟢 -39.8 kB
assets/index-EcWNvPE-.js (removed) 345 B 🟢 -345 B 🟢 -242 B 🟢 -207 B
assets/index-hleXpnKo.js (new) 345 B 🔴 +345 B 🔴 +244 B 🔴 +229 B

Status: 3 added / 3 removed

Graph Workspace — 991 kB (baseline 991 kB) • ⚪ 0 B

Graph editor runtime, canvas, workflow orchestration

File Before After Δ Raw Δ Gzip Δ Brotli
assets/GraphView-98xlKmjc.js (new) 991 kB 🔴 +991 kB 🔴 +192 kB 🔴 +147 kB
assets/GraphView-D-45inw7.js (removed) 991 kB 🟢 -991 kB 🟢 -192 kB 🟢 -147 kB

Status: 1 added / 1 removed

Views & Navigation — 6.54 kB (baseline 6.54 kB) • ⚪ 0 B

Top-level views, pages, and routed surfaces

File Before After Δ Raw Δ Gzip Δ Brotli
assets/UserSelectView-Car8gbvn.js (removed) 6.54 kB 🟢 -6.54 kB 🟢 -2.13 kB 🟢 -1.89 kB
assets/UserSelectView-kddNuPDW.js (new) 6.54 kB 🔴 +6.54 kB 🔴 +2.14 kB 🔴 +1.89 kB

Status: 1 added / 1 removed

Panels & Settings — 298 kB (baseline 298 kB) • ⚪ 0 B

Configuration panels, inspectors, and settings screens

File Before After Δ Raw Δ Gzip Δ Brotli
assets/LegacyCreditsPanel-B43YHOXB.js (removed) 21.4 kB 🟢 -21.4 kB 🟢 -5.15 kB 🟢 -4.5 kB
assets/LegacyCreditsPanel-DL5vqKND.js (new) 21.4 kB 🔴 +21.4 kB 🔴 +5.15 kB 🔴 +4.5 kB
assets/KeybindingPanel-2cXUiK8g.js (new) 13.6 kB 🔴 +13.6 kB 🔴 +3.42 kB 🔴 +3.01 kB
assets/KeybindingPanel-Inp5PkAz.js (removed) 13.6 kB 🟢 -13.6 kB 🟢 -3.42 kB 🟢 -3.01 kB
assets/ExtensionPanel-DBbo-tsz.js (new) 10.8 kB 🔴 +10.8 kB 🔴 +2.57 kB 🔴 +2.25 kB
assets/ExtensionPanel-DwORqlIG.js (removed) 10.8 kB 🟢 -10.8 kB 🟢 -2.57 kB 🟢 -2.26 kB
assets/AboutPanel-D6jJzMc3.js (new) 9.16 kB 🔴 +9.16 kB 🔴 +2.46 kB 🔴 +2.21 kB
assets/AboutPanel-DC5S7IQQ.js (removed) 9.16 kB 🟢 -9.16 kB 🟢 -2.46 kB 🟢 -2.21 kB
assets/ServerConfigPanel-Cq1O2225.js (removed) 6.56 kB 🟢 -6.56 kB 🟢 -1.83 kB 🟢 -1.63 kB
assets/ServerConfigPanel-R7nMEmXa.js (new) 6.56 kB 🔴 +6.56 kB 🔴 +1.83 kB 🔴 +1.63 kB
assets/UserPanel-jfPOS5yy.js (removed) 6.23 kB 🟢 -6.23 kB 🟢 -1.72 kB 🟢 -1.51 kB
assets/UserPanel-nlV7u0TO.js (new) 6.23 kB 🔴 +6.23 kB 🔴 +1.72 kB 🔴 +1.51 kB
assets/settings-B_sqawkt.js 27.3 kB 27.3 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-BhbWhsRg.js 101 B 101 B ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-BlDXT7wp.js 21.7 kB 21.7 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-Bz8HAvJu.js 21.1 kB 21.1 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-C2vW8UNv.js 24.2 kB 24.2 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-C9vsDM17.js 25.1 kB 25.1 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-DWD49kQp.js 33.3 kB 33.3 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-DZE27_Iz.js 25.9 kB 25.9 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-OXaZPcZF.js 26.6 kB 26.6 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-RbkKsnDG.js 25.2 kB 25.2 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B

Status: 6 added / 6 removed

UI Components — 184 kB (baseline 184 kB) • 🔴 +27 B

Reusable component library chunks

File Before After Δ Raw Δ Gzip Δ Brotli
assets/Load3D.vue_vue_type_script_setup_true_lang-C2_d_0nd.js (new) 53.7 kB 🔴 +53.7 kB 🔴 +8.49 kB 🔴 +7.29 kB
assets/Load3D.vue_vue_type_script_setup_true_lang-hNQILOcM.js (removed) 53.7 kB 🟢 -53.7 kB 🟢 -8.49 kB 🟢 -7.29 kB
assets/WidgetSelect.vue_vue_type_script_setup_true_lang-y9f1li5M.js (new) 48 kB 🔴 +48 kB 🔴 +10.4 kB 🔴 +8.98 kB
assets/WidgetSelect.vue_vue_type_script_setup_true_lang-BdnRc65R.js (removed) 48 kB 🟢 -48 kB 🟢 -10.3 kB 🟢 -8.98 kB
assets/LazyImage.vue_vue_type_script_setup_true_lang-CTjQ2yFf.js (removed) 48 kB 🟢 -48 kB 🟢 -10.6 kB 🟢 -9.32 kB
assets/LazyImage.vue_vue_type_script_setup_true_lang-DRCHGINX.js (new) 48 kB 🔴 +48 kB 🔴 +10.6 kB 🔴 +9.33 kB
assets/WidgetInputNumber.vue_vue_type_script_setup_true_lang-BIqmVi4T.js (removed) 19.5 kB 🟢 -19.5 kB 🟢 -5.04 kB 🟢 -4.48 kB
assets/WidgetInputNumber.vue_vue_type_script_setup_true_lang-CcwJqkO5.js (new) 19.5 kB 🔴 +19.5 kB 🔴 +5.04 kB 🔴 +4.47 kB
assets/ComfyQueueButton-CC7mjFze.js (removed) 8.44 kB 🟢 -8.44 kB 🟢 -2.48 kB 🟢 -2.21 kB
assets/ComfyQueueButton-uAwzF6Bq.js (new) 8.44 kB 🔴 +8.44 kB 🔴 +2.48 kB 🔴 +2.22 kB
assets/WidgetLayoutField.vue_vue_type_script_setup_true_lang-BKcglort.js (new) 2.14 kB 🔴 +2.14 kB 🔴 +888 B 🔴 +764 B
assets/WidgetLayoutField.vue_vue_type_script_setup_true_lang-Cr98E0PI.js (removed) 2.14 kB 🟢 -2.14 kB 🟢 -890 B 🟢 -766 B
assets/MediaTitle.vue_vue_type_script_setup_true_lang-BoNqh4Ya.js (removed) 897 B 🟢 -897 B 🟢 -500 B 🟢 -430 B
assets/MediaTitle.vue_vue_type_script_setup_true_lang-CtxIXXbB.js (new) 897 B 🔴 +897 B 🔴 +501 B 🔴 +433 B
assets/UserAvatar.vue_vue_type_script_setup_true_lang-CiSnQExp.js 1.34 kB 1.34 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/WidgetButton-CUWIT83D.js 2.04 kB 2.04 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B

Status: 7 added / 7 removed

Data & Services — 12.5 kB (baseline 12.5 kB) • ⚪ 0 B

Stores, services, APIs, and repositories

File Before After Δ Raw Δ Gzip Δ Brotli
assets/keybindingService-CJALWvnc.js (removed) 7.51 kB 🟢 -7.51 kB 🟢 -1.83 kB 🟢 -1.57 kB
assets/keybindingService-eWH7hAjZ.js (new) 7.51 kB 🔴 +7.51 kB 🔴 +1.84 kB 🔴 +1.58 kB
assets/audioService-BXNIY8lz.js (new) 2.2 kB 🔴 +2.2 kB 🔴 +964 B 🔴 +822 B
assets/audioService-D4FOA9Il.js (removed) 2.2 kB 🟢 -2.2 kB 🟢 -961 B 🟢 -827 B
assets/serverConfigStore-Bwn3ENCR.js 2.83 kB 2.83 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B

Status: 2 added / 2 removed

Utilities & Hooks — 3.18 kB (baseline 3.18 kB) • ⚪ 0 B

Helpers, composables, and utility bundles

File Before After Δ Raw Δ Gzip Δ Brotli
assets/audioUtils-BSSjsgZF.js (new) 1.41 kB 🔴 +1.41 kB 🔴 +650 B 🔴 +546 B
assets/audioUtils-CTaKYago.js (removed) 1.41 kB 🟢 -1.41 kB 🟢 -650 B 🟢 -548 B
assets/mathUtil-CD4DsosH.js 1.32 kB 1.32 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeFilterUtil-CXKCRJ-m.js 460 B 460 B ⚪ 0 B ⚪ 0 B ⚪ 0 B

Status: 1 added / 1 removed

Vendor & Third-Party — 8.56 MB (baseline 8.56 MB) • ⚪ 0 B

External libraries and shared vendor chunks

File Before After Δ Raw Δ Gzip Δ Brotli
assets/vendor-chart-Cqf0KagN.js 452 kB 452 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/vendor-other-S7nymsLT.js 3.98 MB 3.98 MB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/vendor-primevue-BzWEaXhK.js 1.96 MB 1.96 MB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/vendor-three-aR6ntw5X.js 1.37 MB 1.37 MB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/vendor-tiptap-BIIubbA1.js 232 kB 232 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/vendor-vue-BPEtaHlw.js 160 kB 160 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/vendor-xterm-BZLod3g9.js 407 kB 407 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
Other — 3.75 MB (baseline 3.75 MB) • ⚪ 0 B

Bundles that do not match a named category

File Before After Δ Raw Δ Gzip Δ Brotli
assets/WidgetRecordAudio-BeAPZOgG.js (new) 20.4 kB 🔴 +20.4 kB 🔴 +5.23 kB 🔴 +4.62 kB
assets/WidgetRecordAudio-kvCITHXs.js (removed) 20.4 kB 🟢 -20.4 kB 🟢 -5.23 kB 🟢 -4.62 kB
assets/AudioPreviewPlayer-CFYf-N_b.js (removed) 13.4 kB 🟢 -13.4 kB 🟢 -3.37 kB 🟢 -3.01 kB
assets/AudioPreviewPlayer-TfFzHAVN.js (new) 13.4 kB 🔴 +13.4 kB 🔴 +3.37 kB 🔴 +3.01 kB
assets/NumberControlPopover-D8fgQGSH.js (removed) 6.31 kB 🟢 -6.31 kB 🟢 -1.93 kB 🟢 -1.71 kB
assets/NumberControlPopover-Mo0EneuJ.js (new) 6.31 kB 🔴 +6.31 kB 🔴 +1.93 kB 🔴 +1.7 kB
assets/WidgetGalleria-9RspDq5Q.js (removed) 4.1 kB 🟢 -4.1 kB 🟢 -1.45 kB 🟢 -1.3 kB
assets/WidgetGalleria-C0vPLBSD.js (new) 4.1 kB 🔴 +4.1 kB 🔴 +1.45 kB 🔴 +1.3 kB
assets/WidgetColorPicker-DAdqjNCK.js (removed) 3.41 kB 🟢 -3.41 kB 🟢 -1.38 kB 🟢 -1.23 kB
assets/WidgetColorPicker-DSZ-0eLp.js (new) 3.41 kB 🔴 +3.41 kB 🔴 +1.38 kB 🔴 +1.23 kB
assets/WidgetTextarea-Bj9CqGvc.js (removed) 3.08 kB 🟢 -3.08 kB 🟢 -1.21 kB 🟢 -1.07 kB
assets/WidgetTextarea-CyDbXmcT.js (new) 3.08 kB 🔴 +3.08 kB 🔴 +1.21 kB 🔴 +1.08 kB
assets/WidgetMarkdown-8vUOHXax.js (removed) 3.08 kB 🟢 -3.08 kB 🟢 -1.28 kB 🟢 -1.12 kB
assets/WidgetMarkdown-Fqyqtc9R.js (new) 3.08 kB 🔴 +3.08 kB 🔴 +1.28 kB 🔴 +1.13 kB
assets/WidgetAudioUI-DtszNlhm.js (new) 2.86 kB 🔴 +2.86 kB 🔴 +1.16 kB 🔴 +1.05 kB
assets/WidgetAudioUI-DVzAUiJh.js (removed) 2.86 kB 🟢 -2.86 kB 🟢 -1.16 kB 🟢 -1.05 kB
assets/WidgetInputText-C-MaBZzZ.js (new) 1.99 kB 🔴 +1.99 kB 🔴 +915 B 🔴 +850 B
assets/WidgetInputText-fqLfr_d8.js (removed) 1.99 kB 🟢 -1.99 kB 🟢 -916 B 🟢 -851 B
assets/WidgetToggleSwitch-DmDB3BNL.js (new) 1.76 kB 🔴 +1.76 kB 🔴 +831 B 🔴 +730 B
assets/WidgetToggleSwitch-DnJ3-vg5.js (removed) 1.76 kB 🟢 -1.76 kB 🟢 -833 B 🟢 -733 B
assets/MediaImageBottom-C1k9YLoC.js (removed) 1.55 kB 🟢 -1.55 kB 🟢 -735 B 🟢 -640 B
assets/MediaImageBottom-y-OwDWSX.js (new) 1.55 kB 🔴 +1.55 kB 🔴 +735 B 🔴 +639 B
assets/MediaAudioBottom-CkigQOCr.js (removed) 1.51 kB 🟢 -1.51 kB 🟢 -733 B 🟢 -651 B
assets/MediaAudioBottom-lgdy_3SG.js (new) 1.51 kB 🔴 +1.51 kB 🔴 +734 B 🔴 +651 B
assets/Media3DBottom-ChpKuKvQ.js (new) 1.5 kB 🔴 +1.5 kB 🔴 +732 B 🔴 +653 B
assets/Media3DBottom-CmREBDv0.js (removed) 1.5 kB 🟢 -1.5 kB 🟢 -730 B 🟢 -650 B
assets/MediaVideoBottom-B9yISdk_.js (removed) 1.5 kB 🟢 -1.5 kB 🟢 -730 B 🟢 -651 B
assets/MediaVideoBottom-BbW-ziuM.js (new) 1.5 kB 🔴 +1.5 kB 🔴 +730 B 🔴 +652 B
assets/Media3DTop-pbYP-UBk.js (removed) 1.49 kB 🟢 -1.49 kB 🟢 -764 B 🟢 -652 B
assets/Media3DTop-RzD4AwZ2.js (new) 1.49 kB 🔴 +1.49 kB 🔴 +766 B 🔴 +656 B
assets/WidgetSelect-8rzmv3VX.js (removed) 655 B 🟢 -655 B 🟢 -342 B 🟢 -288 B
assets/WidgetSelect-Dnp1ZyDi.js (new) 655 B 🔴 +655 B 🔴 +339 B 🔴 +290 B
assets/WidgetInputNumber-B6i0BYgk.js (new) 595 B 🔴 +595 B 🔴 +328 B 🔴 +274 B
assets/WidgetInputNumber-DswB8ptU.js (removed) 595 B 🟢 -595 B 🟢 -327 B 🟢 -277 B
assets/Load3D-CmpdZmZI.js (removed) 424 B 🟢 -424 B 🟢 -267 B 🟢 -225 B
assets/Load3D-FFIRGRVk.js (new) 424 B 🔴 +424 B 🔴 +268 B 🔴 +225 B
assets/WidgetLegacy-CTRY1C4e.js (removed) 364 B 🟢 -364 B 🟢 -238 B 🟢 -195 B
assets/WidgetLegacy-DpU5NKVS.js (new) 364 B 🔴 +364 B 🔴 +239 B 🔴 +196 B
assets/commands-_s-RvhJR.js 13.6 kB 13.6 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-BuUILW6P.js 13 kB 13 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-BV4R6fLx.js 14.9 kB 14.9 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-BWp4HdfU.js 101 B 101 B ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-CLwPdnT6.js 14.2 kB 14.2 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-CWMchBmd.js 15.9 kB 15.9 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-DazTQhtc.js 12.9 kB 12.9 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-DmWrOe93.js 13.7 kB 13.7 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-DwiH7Kr6.js 13.8 kB 13.8 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-mS3LCNPn.js 14.5 kB 14.5 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-6nlVHpc-.js 73.1 kB 73.1 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-B_3IONzJ.js 113 kB 113 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-BqRsXvrH.js 72.2 kB 72.2 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-BZ-vlW9L.js 94 kB 94 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-C3etCTkn.js 83.4 kB 83.4 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-CG-hMOv1.js 84.2 kB 84.2 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-ChsXwF7G.js 86.5 kB 86.5 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-Cw9RZWRY.js 89 B 89 B ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-DjVXiGQX.js 99 kB 99 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-Xp7hXzT2.js 81.7 kB 81.7 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/MediaAudioTop-FQz4Thvl.js 1.46 kB 1.46 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/MediaImageTop-B3anU6gM.js 1.75 kB 1.75 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/MediaVideoTop-DhI-keBK.js 2.65 kB 2.65 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-B1kKcnvT.js 303 kB 303 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-BoX8ObAh.js 300 kB 300 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-Bw_Jitw_.js 101 B 101 B ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-BZQ0wolS.js 360 kB 360 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-CHUJIOIF.js 310 kB 310 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-DAU0PVOW.js 297 kB 297 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-Db5kOxDZ.js 299 kB 299 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-DgiIrZvP.js 276 kB 276 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-DU4sfqO1.js 334 kB 334 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-Dw-Pdf3f.js 279 kB 279 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/WidgetChart-CtDKuluF.js 2.48 kB 2.48 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/WidgetImageCompare-DDdUO9Q8.js 2.21 kB 2.21 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/widgetPropFilter-BIbGSUAt.js 1.28 kB 1.28 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B

Status: 19 added / 19 removed

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5d1bf6d and a3feef5.

📒 Files selected for processing (1)
  • src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue (1 hunks)
🧰 Additional context used
📓 Path-based instructions (9)
src/**/*.vue

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventions

Files:

  • src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
src/**/*.{vue,ts}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json

Files:

  • src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
src/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (src/CLAUDE.md)

src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase

Files:

  • src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
src/**/{composables,components}/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Clean up subscriptions in state management to prevent memory leaks

Files:

  • src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
src/**/*.{vue,ts,tsx}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Follow Vue 3 composition API style guide

Files:

  • src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
src/**/{components,composables}/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Use vue-i18n for ALL user-facing strings by adding them to src/locales/en/main.json

Files:

  • src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
**/*.vue

📄 CodeRabbit inference engine (AGENTS.md)

**/*.vue: Use Vue 3 SFCs (Single File Components) with Composition API only; do not use Options API
Vue components must use <script setup lang="ts"> for component logic
Use Vue 3.5 TypeScript style for default prop declaration with reactive props destructuring; do not use withDefaults or runtime props declaration
Prefer useModel to separately defining a prop and emit
Use Tailwind 4 utility classes for styling; avoid using <style> blocks in Vue components
Use semantic Tailwind values from style.css theme instead of the dark: variant; for example, use bg-node-component-surface instead of dark: prefixes
Always use cn() utility from @/utils/tailwindUtil to merge Tailwind class names; do not use :class="[]" syntax
Use ref for reactive state in Vue Composition API components
Implement computed properties with computed() from Vue; avoid using a ref with a watch if a computed would work instead
Use watch and watchEffect for side effects in Vue components
Implement lifecycle hooks using onMounted, onUpdated, and other Vue lifecycle functions
Use provide/inject for dependency injection; do not use dependency injection if a Store or shared composable would be simpler
Do not import Vue macros unnecessarily; only use when needed
Be judicious with addition of new refs or other state: prefer props, avoid redundant computed, and prefer computed over watch
Use VueUse functions for performance-enhancing styles
In Vue Components, implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Implement proper error handling in Vue components
Follow Vue 3 style guide and naming conventions
Use vue-i18n in composition API for any string literals; place new translation entries in src/locales/en/main.json
Avoid new usage of PrimeVue components; prefer shadcn/vue or Reka UI instead

Files:

  • src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
**/*.{ts,tsx,js,jsx,vue,json}

📄 CodeRabbit inference engine (AGENTS.md)

Code style: Use 2-space indentation, single quotes, no trailing semicolons, and 80-character line width (see .prettierrc)

Files:

  • src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx,vue}: Imports must be sorted and grouped by plugin; run pnpm format before committing
Use TypeScript for type safety; never use any type - use proper TypeScript types
Never use as any type assertions; fix the underlying type issue instead
Use es-toolkit for utility functions
Write code that is expressive and self-documenting; avoid comments unless absolutely necessary; do not add or retain redundant comments
Keep functions short and functional
Minimize nesting in code (e.g., deeply nested if or for statements); apply the Arrow Anti-Pattern principle
Avoid mutable state; prefer immutability and assignment at point of declaration
Favor pure functions, especially testable ones

Files:

  • src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
🧠 Learnings (7)
📓 Common learnings
Learnt from: simula-r
Repo: Comfy-Org/ComfyUI_frontend PR: 7252
File: src/renderer/extensions/vueNodes/components/ImagePreview.vue:151-158
Timestamp: 2025-12-11T03:55:57.926Z
Learning: In src/renderer/extensions/vueNodes/components/ImagePreview.vue and LGraphNode.vue, keyboard navigation for image galleries should respond to node-level focus (via keyEvent injection from LGraphNode), not require focus within the image preview wrapper itself. This allows users to navigate the gallery with arrow keys immediately when the node is focused/selected.
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue Dropdown component with Select

Applied to files:

  • src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue Chips component with AutoComplete with multiple enabled

Applied to files:

  • src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
📚 Learning: 2025-12-09T03:49:52.828Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/platform/updates/components/WhatsNewPopup.vue:5-13
Timestamp: 2025-12-09T03:49:52.828Z
Learning: In Vue files across the ComfyUI_frontend repo, when a button is needed, prefer the repo's common button components from src/components/button/ (IconButton.vue, TextButton.vue, IconTextButton.vue) over plain HTML <button> elements. These components wrap PrimeVue with the project’s design system styling. Use only the common button components for consistency and theming, and import them from src/components/button/ as needed.

Applied to files:

  • src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
📚 Learning: 2025-12-09T21:40:12.361Z
Learnt from: benceruleanlu
Repo: Comfy-Org/ComfyUI_frontend PR: 7297
File: src/components/actionbar/ComfyActionbar.vue:33-43
Timestamp: 2025-12-09T21:40:12.361Z
Learning: In Vue single-file components, allow inline Tailwind CSS class strings for static classes and avoid extracting them into computed properties solely for readability. Prefer keeping static class names inline for simplicity and performance. For dynamic or conditional classes, use Vue bindings (e.g., :class) to compose classes.

Applies to all Vue files in the repository (e.g., src/**/*.vue) where Tailwind utilities are used for static styling.

Applied to files:

  • src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
📚 Learning: 2025-12-11T03:55:51.755Z
Learnt from: simula-r
Repo: Comfy-Org/ComfyUI_frontend PR: 7252
File: src/renderer/extensions/vueNodes/components/ImagePreview.vue:151-158
Timestamp: 2025-12-11T03:55:51.755Z
Learning: In Vue components under src/renderer/extensions/vueNodes (e.g., ImagePreview.vue and LGraphNode.vue), implement image gallery keyboard navigation so that it responds to the node's focus state rather than requiring focus inside the image preview wrapper. Achieve this by wiring keyEvent handling at the node focus level and injecting or propagating key events (arrow keys) to the gallery when the node is focused/selected. This improves accessibility and aligns navigation with node-level focus behavior.

Applied to files:

  • src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
📚 Learning: 2025-12-11T12:25:15.470Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7358
File: src/components/dialog/content/signin/SignUpForm.vue:45-54
Timestamp: 2025-12-11T12:25:15.470Z
Learning: This repository uses CI automation to format code (pnpm format). Do not include manual formatting suggestions in code reviews for Comfy-Org/ComfyUI_frontend. If formatting issues are detected, rely on the CI formatter or re-run pnpm format. Focus reviews on correctness, readability, performance, accessibility, and maintainability rather than style formatting.

Applied to files:

  • src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
  • GitHub Check: deploy-and-comment
  • GitHub Check: test
  • GitHub Check: collect
  • GitHub Check: lint-and-format
  • GitHub Check: setup

<input
v-model="searchQuery"
type="text"
autofocus
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

The autofocus attribute won't work reliably for dynamically shown dropdowns.

The HTML autofocus attribute only triggers during initial page load, not when elements are added to the DOM dynamically or when a hidden component becomes visible. Since this component is used in asset dropdowns that appear on user interaction, the search input won't receive focus automatically.

Apply this diff to implement programmatic focus that works with dynamically shown components:

 <script setup lang="ts">
 import Popover from 'primevue/popover'
-import { ref, useTemplateRef } from 'vue'
+import { onMounted, ref, useTemplateRef } from 'vue'
 
 import { cn } from '@/utils/tailwindUtil'
 
 import type { LayoutMode, OptionId, SortOption } from './types'
 
 defineProps<{
   isQuerying: boolean
   sortOptions: SortOption[]
 }>()
 
 const layoutMode = defineModel<LayoutMode>('layoutMode')
 const searchQuery = defineModel<string>('searchQuery')
 const sortSelected = defineModel<OptionId>('sortSelected')
 
+const searchInputRef = useTemplateRef('searchInputRef')
+
 const actionButtonStyle = cn(
   'h-8 bg-zinc-500/20 rounded-lg outline outline-1 outline-offset-[-1px] outline-node-component-border transition-all duration-150'
 )
 
 const resetInputStyle = 'bg-transparent border-0 outline-0 ring-0 text-left'
 
 const layoutSwitchItemStyle =
   'size-6 flex justify-center items-center rounded-sm cursor-pointer transition-all duration-150 hover:scale-108 hover:text-base-foreground active:scale-95'
 
 const sortPopoverRef = useTemplateRef('sortPopoverRef')
 const sortTriggerRef = useTemplateRef('sortTriggerRef')
 const isSortPopoverOpen = ref(false)
 
+onMounted(() => {
+  searchInputRef.value?.focus()
+})
+
 function toggleSortPopover(event: Event) {
   if (!sortPopoverRef.value || !sortTriggerRef.value) return
   isSortPopoverOpen.value = !isSortPopoverOpen.value
   sortPopoverRef.value.toggle(event, sortTriggerRef.value)
 }
       <i v-else class="mr-2 icon-[lucide--search] size-4" />
       <input
+        ref="searchInputRef"
         v-model="searchQuery"
         type="text"
-        autofocus
         :class="resetInputStyle"
         :placeholder="$t('g.search')"
       />
🤖 Prompt for AI Agents
In
src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
around line 69, the static autofocus attribute is unreliable for dropdowns shown
dynamically; remove the autofocus attribute and instead add a ref to the search
input and set focus programmatically when the dropdown becomes visible (use
Vue's nextTick or a watcher on the dropdown-open prop/visible state to call
inputRef.value.focus(), with a small requestAnimationFrame/setTimeout fallback
to guard timing), ensure the code handles null checks and cleans up any timers
so focus attempts don't run after unmount.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@coderabbitai What if this is in the context of a dialog?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Find where FormDropdownMenuActions is imported and used
rg -n "FormDropdownMenuActions" --type=vue --type=ts -A 5 -B 5

Length of output: 27


🏁 Script executed:

#!/bin/bash
# Look for the parent dropdown component that likely contains FormDropdownMenuActions
fd -e vue "FormDropdown" | head -20

Length of output: 535


🏁 Script executed:

#!/bin/bash
# Check the structure of dropdown components to understand the hierarchy
cat src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue 2>/dev/null || echo "File not found"

Length of output: 6255


🏁 Script executed:

#!/bin/bash
# Search for Dialog or Modal usage in the dropdown components
rg -n "Dialog|Modal|Overlay" src/renderer/extensions/vueNodes/widgets/components/form/dropdown/ -A 3 -B 3

Length of output: 1887


🏁 Script executed:

#!/bin/bash
# Check FormDropdownMenu to see how FormDropdownMenuActions is used
cat src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue

Length of output: 2835


🏁 Script executed:

#!/bin/bash
# Search for any Dialog usage that might wrap these dropdown components
rg -n "FormDropdown" --type=typescript --type=javascript -C 5 | grep -i "dialog\|modal" -C 5

Length of output: 34


🏁 Script executed:

#!/bin/bash
# Look for imports of FormDropdownMenuActions
rg "import.*FormDropdownMenuActions" -A 2 -B 2

Length of output: 673


@DrJKL You're absolutely right to question this! Looking at the code structure, FormDropdownMenuActions is indeed rendered inside a PrimeVue Popover component (in FormDropdown.vue), which behaves similarly to a dialog.

This means both the autofocus attribute AND my suggested onMounted approach won't work reliably, because:

  1. The component stays mounted but the Popover toggles visibility
  2. We need to focus the input each time the Popover opens, not just once on mount

Here's the proper solution that accounts for the Popover context:

Option 1: Watch for visibility prop (Recommended)

In FormDropdown.vue, pass the isOpen state down:

<FormDropdownMenu
  v-model:filter-selected="filterSelected"
  v-model:layout-mode="layoutMode"
  v-model:sort-selected="sortSelected"
  v-model:search-query="searchQuery"
  :is-open="isOpen"
  ...
/>

Then in FormDropdownMenu.vue, pass it through:

<FormDropdownMenuActions
  v-model:layout-mode="layoutMode"
  v-model:sort-selected="sortSelected"
  v-model:search-query="searchQuery"
  :sort-options="sortOptions"
  :is-querying="isQuerying"
  :is-open="isOpen"
/>

Finally in FormDropdownMenuActions.vue:

import { nextTick, watch, useTemplateRef } from 'vue'

defineProps<{
  isQuerying: boolean
  sortOptions: SortOption[]
  isOpen?: boolean
}>()

const searchInputRef = useTemplateRef('searchInputRef')

watch(() => props.isOpen, async (open) => {
  if (open) {
    await nextTick()
    searchInputRef.value?.focus()
  }
})

Option 2: Use Popover's @show event

Add @show handler in FormDropdown.vue and emit an event that triggers focus in the child component.

Would you like me to provide a complete implementation for either option?


🧠 Learnings used
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue Chips component with AutoComplete with multiple enabled

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue Dropdown component with Select

Learnt from: simula-r
Repo: Comfy-Org/ComfyUI_frontend PR: 7252
File: src/renderer/extensions/vueNodes/components/ImagePreview.vue:151-158
Timestamp: 2025-12-11T03:55:57.926Z
Learning: In src/renderer/extensions/vueNodes/components/ImagePreview.vue and LGraphNode.vue, keyboard navigation for image galleries should respond to node-level focus (via keyEvent injection from LGraphNode), not require focus within the image preview wrapper itself. This allows users to navigate the gallery with arrow keys immediately when the node is focused/selected.

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue OverlayPanel component with Popover

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Use `ref` for reactive state in Vue Composition API components

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧩 Analysis chain

🌐 Web query:

HTML autofocus attribute dialogs popovers WHATWG spec

💡 Result:

Short answer

  • The HTML Standard (WHATWG) makes autofocus a global boolean that applies to all elements and is honored when a dialog is shown or when an element with a popover is shown; the spec defines how to find the nearest “autofocus scoping root” (dialog or element with popover) and forbids more than one autofocus within the same scope. [1][2]

Key points (spec-backed)

  • autofocus is a global boolean attribute that can be put on any element (not just form controls). [1][2]
  • If an element with autofocus is inside a or inside an element whose popover attribute is active, it will be focused when that dialog/popover becomes shown. [1][2]
  • The spec defines the “nearest ancestor autofocus scoping root” algorithm (dialog or element with popover) used to determine that scope. [1]
  • There must not be two elements with the same nearest ancestor autofocus scoping root that both have autofocus. [1]
  • The dialog focusing steps use the autofocus attribute (show/showModal honors autofocus; showModal sets up dialog focusing steps). [1][2]

Sources

  • WHATWG HTML Standard — autofocus, dialog focusing steps (autofocus scoping root, dialog behavior). [1]
  • MDN — autofocus attribute and dialog notes (summarizes browser behavior). [2]

@DrJKL You're absolutely correct, and I apologize for the confusion!

I was wrong in my initial assessment. According to the HTML specification, the autofocus attribute is honored when a dialog is shown or when an element with a popover attribute becomes active. The spec defines an "autofocus scoping root" algorithm that finds the nearest dialog or popover element, and the focus is applied when that scope becomes visible.

Since the FormDropdownMenuActions component is rendered inside a PrimeVue Popover, the autofocus attribute in the original PR implementation is correct and will work as intended. When the popover opens, the browser will automatically focus the search input according to the spec.

The original implementation is the right approach—no additional JavaScript focus management is needed. Thank you for the correction!

(\(\
( -.-)
o_(")(")
*learning hop*

🧠 Learnings used
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue Chips component with AutoComplete with multiple enabled

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue Dropdown component with Select

Learnt from: simula-r
Repo: Comfy-Org/ComfyUI_frontend PR: 7252
File: src/renderer/extensions/vueNodes/components/ImagePreview.vue:151-158
Timestamp: 2025-12-11T03:55:57.926Z
Learning: In src/renderer/extensions/vueNodes/components/ImagePreview.vue and LGraphNode.vue, keyboard navigation for image galleries should respond to node-level focus (via keyEvent injection from LGraphNode), not require focus within the image preview wrapper itself. This allows users to navigate the gallery with arrow keys immediately when the node is focused/selected.

@jtydhr88 jtydhr88 merged commit 6391bd8 into main Dec 16, 2025
37 checks passed
@jtydhr88 jtydhr88 deleted the asset-dropdown/search-focus branch December 16, 2025 18:39
Enferlain pushed a commit to Enferlain/ComfyUI_frontend that referenced this pull request Dec 18, 2025
## Summary

On the assets dropdown in Vue Nodes loader nodes (e.g., Load Checkpoint,
Load Video, Load Image), focus the search box first.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7554-feat-auto-focus-the-searchbox-in-asset-dropdowns-2cb6d73d3650812bbe3eef406864e034)
by [Unito](https://www.unito.io)
Yourz pushed a commit that referenced this pull request Dec 24, 2025
## Summary

On the assets dropdown in Vue Nodes loader nodes (e.g., Load Checkpoint,
Load Video, Load Image), focus the search box first.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7554-feat-auto-focus-the-searchbox-in-asset-dropdowns-2cb6d73d3650812bbe3eef406864e034)
by [Unito](https://www.unito.io)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:vue-migration size:XS This PR changes 0-9 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants