dropdown of selectmenu doesn't get closed automatically when updating options asynchronously because of disabled property

[devdeadviz]

Environment

• Operating System: Windows 10
• Node Version: v20.11.0
• Nuxt Version: 3.11.1
• CLI Version: 3.10.1
• Nitro Version: 2.9.4
• Package Manager: [email protected]
• Builder: - User Config: app, devtools, srcDir, modules, ui, colorMode, i18n, build, typescript, imports, components, alias, runtimeConfig
• Runtime Modules: @pinia/[email protected], @pinia-plugin-persistedstate/[email protected], @nuxtjs/[email protected], @vueuse/[email protected], [email protected], @nuxt/[email protected]
• Build Modules: -

Version

v2.14.2

Reproduction

Bug Video Link: https://drive.google.com/file/d/1MzdjUMDsBL2flr8Yb9fT6xQ3sT-a6ECW/view

Steps to reproduce:

1. Add a SelectMenu with the searchable prop set to true.
2. Add the disabled property to the SelectMenu.
3. Click on the SelectMenu to open the menu.
4. Select an option from the menu.
5. Disable the SelectMenu while the option is getting updated asynchronously.
6. The item gets updated asynchronously but the dropdown still remains open.

This issue only happens when we have disabled property set on the SelectMenu.

Description

I am using select menu component with searchable true and updating the selected option from the dropdown asynchronously, but when we select an option from the dropdown the options gets updated but the dropdown is not getting closed automatically.

Additional context

No response

Logs

No response

[sandros94]

Would it be simpler to use the :loading="loading" prop instead of the disabled one?

Also, if you are using the multiple prop that will prevent your SelectMenu from closing after you select something

Could you share a snippet of your code (or a stackblitz reproduction)? It isn't fully clear to me why you need to update the options prop on select of one.

[devdeadviz]

@Sandros94 Here is the code snippet

<u-select-menu
          v-model="row.item"
          :searchable="getItemOptions"
          option-attribute="name"
          by="id"
          :disabled="updateOrderItemLoading"
          :popper="{ offsetDistance: 0 }"
          class="w-56"
          data-testid="order-item-selector"
          @change="handleUpdateOrderItem(row)"
        >
          <template #label>
            <div v-if="row?.item?.id" class="relative w-full">
              <span>{{ row?.item?.name }}</span>
              <u-tooltip text="Reset item" class="absolute right-0">
                <u-button
                  data-testid="reset-item-selector"
                  icon="i-ph-x-circle-duotone"
                  color="gray"
                  :padded="false"
                  variant="link"
                  @click.stop="resetOrderItem(row)"
                />
              </u-tooltip>
            </div>
            <span v-else> Search for the item </span>
          </template>
        </u-select-menu>

getItemOptions is the functionn which provides the options for SelectMenu.

handleUpdateOrderItem is the function which updates the selected option asynchronously.

Also, I am not using the multiple prop and I am aware of that use case and In my case I am using single option selection and disabling the field until the selected option gets updated asynchronously is much better because we don't want the user to be able to interact with the SelectMenu when the option is getting updated asynchronously.

And this issue was not there in old nuxt version.

[sandros94]

@devdeadviz I'm sorry for the late reply.

Still, as also described in the docs, you should be using loading instead. Since disabled will completely freeze any operation and execution.

[moshetanzer]

Hi @devdeadviz,

Did the above solve your issue?

[devdeadviz]

Hi @devdeadviz,

Did the above solve your issue?

No, the solution suggested by @Sandros94 doesn't solve the issue.

[sandros94]

@devdeadviz would you be able to provide a minimal reproduction? I would be happy to debug this further

[devdeadviz]

@devdeadviz would you be able to provide a minimal reproduction? I would be happy to debug this further

Nevermind, I solve the issue. Steps which i follow are:

• The initial version which I was using for nuxt ui was 2.15.0.
• I have upgraded the nuxt ui version from 2.15.0 to 2.17.0 which upgrades the yarn.lock file as well and here at this point the issue is resolved.
• Then, I reverted back nuxt ui version to 2.15.0 with same upgraded lock file which we got in previous steps. Here as well the issue is resolved so, I think the issues was there in some other dependencies which is getting installed along with nuxt ui version 2.15.0.

Thank you for your help. @Sandros94

[sandros94]

This might explain why I wasn't able to reproduce it. Thanks for the update @devdeadviz!