Merge branch 'master' into dev

lerna.json

@@ -13,5 +13,5 @@
     }
   },
   "npmClient": "pnpm",
-  "version": "3.7.8"
+  "version": "3.7.9"
 }

packages/api-generator/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuetify/api-generator",
-  "version": "3.7.8",
+  "version": "3.7.9",
   "private": true,
   "description": "",
   "scripts": {

packages/docs/package.json

@@ -3,7 +3,7 @@
   "description": "A Vue.js project",
   "private": true,
   "author": "John Leider <[email protected]>",
-  "version": "3.7.8",
+  "version": "3.7.9",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuetifyjs/vuetify.git",

packages/vuetify/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuetify",
   "description": "Vue Material Component Framework",
-  "version": "3.7.8",
+  "version": "3.7.9",
   "author": {
     "name": "John Leider",
     "email": "[email protected]"

packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx

@@ -21,6 +21,7 @@ import { useForm } from '@/composables/form'
 import { forwardRefs } from '@/composables/forwardRefs'
 import { useItems } from '@/composables/list-items'
 import { useLocale } from '@/composables/locale'
+import { useIsMousedown } from '@/composables/mousedown'
 import { useProxiedModel } from '@/composables/proxiedModel'
 import { makeTransitionProps } from '@/composables/transition'
 
@@ -150,6 +151,7 @@ export const VAutocomplete = genericComponent<new <
     const label = computed(() => menu.value ? props.closeText : props.openText)
     const { items, transformIn, transformOut } = useItems(props)
     const { textColorClasses, textColorStyles } = useTextColor(color)
+    const { isMousedown } = useIsMousedown()
     const search = useProxiedModel(props, 'search', '')
     const model = useProxiedModel(
       props,
@@ -373,6 +375,12 @@ export const VAutocomplete = genericComponent<new <
       }
     }
 
+    function onBlur (e: FocusEvent) {
+      if (!isMousedown.value) {
+        menu.value = false
+      }
+    }
+
     watch(isFocused, (val, oldVal) => {
       if (val === oldVal) return
 
@@ -384,7 +392,6 @@ export const VAutocomplete = genericComponent<new <
         nextTick(() => isSelecting.value = false)
       } else {
         if (!props.multiple && search.value == null) model.value = []
-        menu.value = false
         if (!model.value.some(({ title }) => title === search.value)) search.value = ''
         selectionIndex.value = -1
       }
@@ -453,6 +460,7 @@ export const VAutocomplete = genericComponent<new <
           readonly={ form.isReadonly.value }
           placeholder={ isDirty ? undefined : props.placeholder }
           onClick:clear={ onClear }
+          onBlur={ onBlur }
           onMousedown:control={ onMousedownControl }
           onKeydown={ onKeydown }
         >

packages/vuetify/src/components/VCombobox/VCombobox.tsx

@@ -22,6 +22,7 @@ import { useForm } from '@/composables/form'
 import { forwardRefs } from '@/composables/forwardRefs'
 import { transformItem, useItems } from '@/composables/list-items'
 import { useLocale } from '@/composables/locale'
+import { useIsMousedown } from '@/composables/mousedown'
 import { useProxiedModel } from '@/composables/proxiedModel'
 import { makeTransitionProps } from '@/composables/transition'
 
@@ -166,6 +167,7 @@ export const VCombobox = genericComponent<new <
       }
     )
     const form = useForm(props)
+    const { isMousedown } = useIsMousedown()
 
     const hasChips = computed(() => !!(props.chips || slots.chip))
     const hasSelectionSlot = computed(() => hasChips.value || !!slots.selection)
@@ -376,6 +378,13 @@ export const VCombobox = genericComponent<new <
         vTextFieldRef.value?.focus()
       }
     }
+
+    function onBlur (e: FocusEvent) {
+      if (!isMousedown.value) {
+        menu.value = false
+      }
+    }
+
     /** @param set - null means toggle */
     function select (item: ListItem | undefined, set: boolean | null = true) {
       if (!item || item.props.disabled) return
@@ -425,7 +434,6 @@ export const VCombobox = genericComponent<new <
       if (val || val === oldVal) return
 
       selectionIndex.value = -1
-      menu.value = false
 
       if (search.value) {
         if (props.multiple) {
@@ -497,6 +505,7 @@ export const VCombobox = genericComponent<new <
           readonly={ form.isReadonly.value }
           placeholder={ isDirty ? undefined : props.placeholder }
           onClick:clear={ onClear }
+          onBlur={ onBlur }
           onMousedown:control={ onMousedownControl }
           onKeydown={ onKeydown }
         >

packages/vuetify/src/components/VSelect/VSelect.tsx

@@ -20,6 +20,7 @@ import { forwardRefs } from '@/composables/forwardRefs'
 import { IconValue } from '@/composables/icons'
 import { makeItemsProps, useItems } from '@/composables/list-items'
 import { useLocale } from '@/composables/locale'
+import { useIsMousedown } from '@/composables/mousedown'
 import { useProxiedModel } from '@/composables/proxiedModel'
 import { makeTransitionProps } from '@/composables/transition'
 
@@ -168,6 +169,7 @@ export const VSelect = genericComponent<new <
         : model.value.length
     })
     const form = useForm(props)
+    const { isMousedown } = useIsMousedown()
     const selectedValues = computed(() => model.value.map(selection => selection.value))
     const isFocused = shallowRef(false)
     const label = computed(() => menu.value ? props.closeText : props.openText)
@@ -282,7 +284,7 @@ export const VSelect = genericComponent<new <
       }
     }
     function onBlur (e: FocusEvent) {
-      if (!listRef.value?.$el.contains(e.relatedTarget as HTMLElement)) {
+      if (!listRef.value?.$el.contains(e.relatedTarget as HTMLElement) && !isMousedown.value) {
         menu.value = false
       }
     }

packages/vuetify/src/composables/display.ts

@@ -227,7 +227,7 @@ export const makeDisplayProps = propsFactory({
 }, 'display')
 
 export function useDisplay (
-  props: DisplayProps = {},
+  props: DisplayProps = { mobile: null },
   name = getCurrentInstanceName(),
 ) {
   const display = inject(DisplaySymbol)

packages/vuetify/src/composables/mousedown.ts

@@ -0,0 +1,33 @@
+// https://github.com/vuetifyjs/vuetify/issues/20003
+/**
+ * This composable is designed to track whether the mouse is in a mousedown state at any given time. The original motivation is that
+ * it is impossible to distinguish whether a blur event is triggered by mousedown, keydown, or via JavaScript.
+ * This composable allows for conditional logic when a blur is triggered by mousedown.
+ */
+
+// Utilities
+import { onMounted, onUnmounted, shallowRef } from 'vue'
+
+export function useIsMousedown () {
+  const isMousedown = shallowRef(false)
+
+  function mousedown () {
+    isMousedown.value = true
+  }
+
+  function mouseup () {
+    isMousedown.value = false
+  }
+
+  onMounted(() => {
+    document.body.addEventListener('mousedown', mousedown)
+    document.body.addEventListener('mouseup', mouseup)
+  })
+
+  onUnmounted(() => {
+    document.body.removeEventListener('mousedown', mousedown)
+    document.body.removeEventListener('mouseup', mouseup)
+  })
+
+  return { isMousedown }
+}