Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(VSelect/VAutocomplete/VCombobox): respect click outside #20004

Merged
merged 7 commits into from
Jan 29, 2025

Conversation

yuwu9145
Copy link
Member

@yuwu9145 yuwu9145 commented Jun 13, 2024

fixes #20003

Cause

Click outside isn't triggered due to blur is triggered by "mousedown" which is before click outside happens

Solution

When "mousedown outside", menu shouldn't be closed as it will be closed by "click outside" later. But it should be closed when blur is triggered by TAB or calling blur() from javascript

Markup:

<template>
  <v-app>
    <v-main>
      <v-menu :close-on-content-click="false">
        <template #activator="{ props }">
          <v-btn v-bind="props">Open</v-btn>
        </template>
        <v-sheet class="pa-4">
          <div>
            <v-select
              label="Select"
              :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
            />
            <v-autocomplete
              id="test"
              label="Autocomplete"
              :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
            />
            <v-combobox
              label="Autocomplete"
              :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
            />
          </div>
        </v-sheet>
      </v-menu>
      
    </v-main>
  </v-app>
</template>

<script setup>
import { ref } from 'vue'

const msg = ref('Hello World!')
</script>




@yuwu9145 yuwu9145 marked this pull request as ready for review June 16, 2024 14:00
@yuwu9145 yuwu9145 requested review from johnleider and KaelWD June 16, 2024 14:00
@johnleider
Copy link
Member

Your changes look good but I'm curious as to what @KaelWD thinks.

johnleider
johnleider previously approved these changes Jan 29, 2025
@johnleider johnleider added this to the v3.7.x milestone Jan 29, 2025
@johnleider johnleider merged commit 9c58528 into master Jan 29, 2025
18 checks passed
@johnleider johnleider deleted the autocomplete-in-menu branch January 29, 2025 18:29
KaelWD pushed a commit that referenced this pull request Jan 30, 2025
fixes #20003

Co-authored-by: John Leider <john@vuetifyjs.com>
KaelWD added a commit that referenced this pull request Feb 4, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
C: VAutocomplete C: VCombobox C: VSelect T: bug Functionality that does not work as intended/expected
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug Report][3.6.9] VAutocomplete inside VMenu breaks click outside effect for parent menu
3 participants