fix: close linked widget menus on mount

Author: jaeone94

src/renderer/extensions/vueNodes/widgets/components/WidgetWithControl.test.ts

@@ -1,5 +1,5 @@
 import { createTestingPinia } from '@pinia/testing'
-import { fireEvent, render, screen, waitFor } from '@testing-library/vue'
+import { render, screen, waitFor } from '@testing-library/vue'
 import userEvent from '@testing-library/user-event'
 import PrimeVue from 'primevue/config'
 import { describe, expect, it, vi } from 'vitest'
@@ -171,9 +171,9 @@ describe('WidgetWithControl', () => {
     const update = vi.fn<(value: WidgetValue) => void>()
     const widget = makeControlWidget(update, 'randomize')
     const { rerender } = mountWithPortal(widget)
+    const user = userEvent.setup()
 
-    // eslint-disable-next-line testing-library/prefer-user-event
-    await fireEvent.click(await screen.findByTestId('value-control'))
+    await user.click(await screen.findByTestId('value-control'))
     expect(await screen.findAllByRole('radio')).toHaveLength(4)
 
     const linkedWidget: SimplifiedControlWidget = {
@@ -193,7 +193,6 @@ describe('WidgetWithControl', () => {
     expect(linkedButton).toBeDisabled()
     linkedButton.focus()
     expect(linkedButton).not.toHaveFocus()
-    const user = userEvent.setup()
     await user.click(linkedButton)
     await user.keyboard('{Enter}')
     expect(update).not.toHaveBeenCalled()

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.test.ts

@@ -83,6 +83,7 @@ const MockPopover = {
 interface MountDropdownOptions {
   closeOnDisable?: boolean
   disabled?: boolean
+  isOpen?: boolean
   searcher?: (
     query: string,
     items: FormDropdownItem[],
@@ -109,6 +110,7 @@ function mountDropdown(
       items,
       closeOnDisable: options.closeOnDisable,
       disabled: options.disabled,
+      ...(options.isOpen === undefined ? {} : { isOpen: options.isOpen }),
       multiple: options.multiple,
       selected: options.selected,
       searcher: options.searcher,
@@ -482,6 +484,18 @@ describe('FormDropdown', () => {
     expect(onUpdateIsOpen).toHaveBeenLastCalledWith(false)
   })
 
+  it('closes when mounted disabled with closeOnDisable', () => {
+    const onUpdateIsOpen = vi.fn()
+    mountDropdown([createItem('1', 'alpha')], {
+      closeOnDisable: true,
+      disabled: true,
+      isOpen: true,
+      onUpdateIsOpen
+    })
+
+    expect(onUpdateIsOpen).toHaveBeenCalledWith(false)
+  })
+
   it('stays open when disabled without closeOnDisable', async () => {
     const onUpdateIsOpen = vi.fn()
     const items = [createItem('1', 'alpha')]

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue

@@ -212,15 +212,19 @@ function focusTrigger() {
 const closeDropdown = ({ restoreFocus = false } = {}) => {
   if (popoverRef.value) {
     popoverRef.value.hide?.()
-    isOpen.value = false
   }
+  isOpen.value = false
 
   if (restoreFocus) focusTrigger()
 }
 
-watch([() => disabled, () => closeOnDisable], ([isDisabled, shouldClose]) => {
-  if (isDisabled && shouldClose) closeDropdown()
-})
+watch(
+  [() => disabled, () => closeOnDisable],
+  ([isDisabled, shouldClose]) => {
+    if (isDisabled && shouldClose) closeDropdown()
+  },
+  { immediate: true }
+)
 
 /**
  * Dismiss on `pointerdown` rather than PrimeVue's default `click` (mouseup) so