padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

BUILD ERRORS: Refactor MarketFuzzySearch component for improved input handling

Browse source 
- Updated the searchInputRef initialization to remove the explicit type declaration, simplifying the code.
- Enhanced input focus and blur handling by ensuring the existence of the $el property before accessing the input element, improving robustness.
- Streamlined the focus management logic in the handleClear and handleKeydown functions for better user experience.

These changes enhance the reliability and clarity of the MarketFuzzySearch component, improving overall usability.
This commit is contained in:
padreug 2025-09-26 17:11:08 +02:00
parent 522d159628
commit d98dcc58d7
1 changed files with 7 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/modules/market/components/MarketFuzzySearch.vue
View file

@ -193,7 +193,7 @@ const {
} = useFuzzySearch(dataRef, props.options) } = useFuzzySearch(dataRef, props.options)
// Local state // Local state
const searchInputRef = ref<HTMLInputElement>() const searchInputRef = ref()
const isFocused = ref(false) const isFocused = ref(false)
// Persistent recent searches (stored in localStorage) // Persistent recent searches (stored in localStorage)
@ -281,8 +281,8 @@ const handleClear = () => {
emit('clear') emit('clear')
// Focus the input after clearing // Focus the input after clearing
if (searchInputRef.value) { if (searchInputRef.value?.$el) {
const inputElement = searchInputRef.value.$el?.querySelector('input') || searchInputRef.value.$el const inputElement = searchInputRef.value.$el.querySelector('input') || searchInputRef.value.$el
if (inputElement && typeof inputElement.focus === 'function') { if (inputElement && typeof inputElement.focus === 'function') {
inputElement.focus() inputElement.focus()
} }
@ -294,8 +294,8 @@ const handleKeydown = (event: KeyboardEvent) => {
if (event.key === 'Escape') { if (event.key === 'Escape') {
if (searchQuery.value) { if (searchQuery.value) {
handleClear() handleClear()
} else if (searchInputRef.value) { } else if (searchInputRef.value?.$el) {
const inputElement = searchInputRef.value.$el?.querySelector('input') || searchInputRef.value.$el const inputElement = searchInputRef.value.$el.querySelector('input') || searchInputRef.value.$el
if (inputElement && typeof inputElement.blur === 'function') { if (inputElement && typeof inputElement.blur === 'function') {
inputElement.blur() inputElement.blur()
} }
@ -346,9 +346,9 @@ const handleGlobalKeydown = (event: KeyboardEvent) => {
if ((event.metaKey || event.ctrlKey) && event.key === 'k') { if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
event.preventDefault() event.preventDefault()
console.log('⌘K/Ctrl+K pressed, focusing search input', !!searchInputRef.value) console.log('⌘K/Ctrl+K pressed, focusing search input', !!searchInputRef.value)
if (searchInputRef.value) { if (searchInputRef.value?.$el) {
// Access the underlying HTML input element from the Shadcn Input component // Access the underlying HTML input element from the Shadcn Input component
const inputElement = searchInputRef.value.$el?.querySelector('input') || searchInputRef.value.$el const inputElement = searchInputRef.value.$el.querySelector('input') || searchInputRef.value.$el
if (inputElement && typeof inputElement.focus === 'function') { if (inputElement && typeof inputElement.focus === 'function') {
inputElement.focus() inputElement.focus()
} }