Unexpected Closure of Search Mask When Using @click Directive with MouseDown Inside and MouseUp Outside

[CloudeaSoft]

Description

When utilizing the @click directive, an unexpected behavior occurs. If a user presses the mouse button down on an inner element, but releases the button outside of this area (on the mask element), the mask element is unexpectedly closed. This inconsistent behavior can lead to confusion and potentially poor user experience.

Address:

The issue can be traced to the code located at the following GitHub repository and file path:

kun-galgame-nuxt3/components/kun/search/Search.vue

Lines 89 to 90 in 3585811

	<div class="mask" v-if="isShowSearch" @click="isShowSearch = false">
	<div ref="container" class="container" @click.stop>

Solution

Use @mousedown instead of @click.

[CloudeaSoft]

This issue can be [first-time-only] or [good-first-issue].

[KUN1007]

The search function will be refactored. This issue will be kept until the refactoring is complete.