alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(core): allow multiselect when input is focused (#1842)

Browse Source 
* fix(core): allow multiselect when input is focused

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

* chore(changeset): add

---------

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2025-05-15 17:51:30 +02:00
parent a0c83f8765
commit 666e4eabab
2 changed files with 18 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/blue-frogs-swim.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@vue-flow/core": patch
---
Allow multi-select when input is focused.

23
packages/core/src/composables/useKeyPress.ts
View File

@@ -1,5 +1,5 @@
import type { MaybeRefOrGetter } from 'vue'
import { ref, toRef, toValue, watch } from 'vue'
import { computed, shallowRef, toValue, watch } from 'vue'
import type { KeyFilter, KeyPredicate } from '@vueuse/core'
import { onKeyStroke, useEventListener } from '@vueuse/core'
@@ -14,6 +14,8 @@ export interface UseKeyPressOptions {
const inputTags = ['INPUT', 'SELECT', 'TEXTAREA']
const defaultDoc = typeof document !== 'undefined' ? document : null
export function isInputDOMNode(event: KeyboardEvent): boolean {
const target = (event.composedPath?.()?.[0] || event.target) as HTMLElement
@@ -87,13 +89,9 @@ function useKeyOrCode(code: string, keysToWatch: string | string[]): KeyOrCode {
* @param options - Options object
*/
export function useKeyPress(keyFilter: MaybeRefOrGetter<KeyFilter | boolean | null>, options?: UseKeyPressOptions) {
const actInsideInputWithModifier = toRef(() => toValue(options?.actInsideInputWithModifier) ?? false)
const target = computed(() => toValue(options?.target) ?? defaultDoc)
const target = toRef(() => toValue(options?.target) ?? window)
const preventDefault = toRef(() => toValue(options?.preventDefault) ?? true)
const isPressed = ref(toValue(keyFilter) === true)
const isPressed = shallowRef(toValue(keyFilter) === true)
let modifierPressed = false
@@ -121,9 +119,12 @@ export function useKeyPress(keyFilter: MaybeRefOrGetter<KeyFilter | boolean | nu
onKeyStroke(
(...args) => currentFilter(...args),
(e) => {
const actInsideInputWithModifier = toValue(options?.actInsideInputWithModifier) ?? true
const preventDefault = toValue(options?.preventDefault) ?? false
modifierPressed = wasModifierPressed(e)
const preventAction = (!modifierPressed || (modifierPressed && !actInsideInputWithModifier.value)) && isInputDOMNode(e)
const preventAction = (!modifierPressed || (modifierPressed && !actInsideInputWithModifier)) && isInputDOMNode(e)
if (preventAction) {
return
@@ -132,7 +133,7 @@ export function useKeyPress(keyFilter: MaybeRefOrGetter<KeyFilter | boolean | nu
const target = (e.composedPath?.()?.[0] || e.target) as Element | null
const isInteractiveElement = target?.nodeName === 'BUTTON' || target?.nodeName === 'A'
if (!preventDefault.value && (modifierPressed || !isInteractiveElement)) {
if (!preventDefault && (modifierPressed || !isInteractiveElement)) {
e.preventDefault()
}
@@ -144,8 +145,10 @@ export function useKeyPress(keyFilter: MaybeRefOrGetter<KeyFilter | boolean | nu
onKeyStroke(
(...args) => currentFilter(...args),
(e) => {
const actInsideInputWithModifier = toValue(options?.actInsideInputWithModifier) ?? true
if (isPressed.value) {
const preventAction = (!modifierPressed || (modifierPressed && !actInsideInputWithModifier.value)) && isInputDOMNode(e)
const preventAction = (!modifierPressed || (modifierPressed && !actInsideInputWithModifier)) && isInputDOMNode(e)
if (preventAction) {
return