ryanmwangi/Compareware_next.js
1
0
Fork 0
Code Issues Pull requests Releases Activity

fix(PropertyInput): improve blur handling and suggestion click event handling

Browse source
This commit is contained in:
ryan 2025-07-16 15:27:57 +03:00
parent e42eec5dc1
commit 90abad12b9
1 changed files with 19 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/components/PropertyInput.tsx
View file

@ -165,18 +165,31 @@ export function PropertyInput({
// Handle blur
const handleBlur = useCallback((e: React.FocusEvent<HTMLInputElement>) => {
// Delay hiding suggestions to allow for clicks on suggestions
// Delay and more robust checking
setTimeout(() => {
const relatedTarget = e.relatedTarget as HTMLElement;
if (!suggestionsRef.current?.contains(relatedTarget)) {
// Check if the active element is within our suggestions dropdown
const activeElement = document.activeElement;
const isClickingOnSuggestion = suggestionsRef.current?.contains(activeElement) ||
suggestionsRef.current?.contains(e.relatedTarget as HTMLElement);
if (!isClickingOnSuggestion) {
setShowSuggestions(false);
setSelectedIndex(-1);
}
}, 150);
}, 200);
}, []);
// Handle suggestion click
const handleSuggestionClick = useCallback((property: PropertySuggestion) => {
const handleSuggestionClick = useCallback((property: PropertySuggestion, event: React.MouseEvent) => {
// Prevent the blur event from interfering
event.preventDefault();
event.stopPropagation();
// Immediately hide suggestions and process selection
setShowSuggestions(false);
setSelectedIndex(-1);
// Process the selection
handlePropertySelect(property);
}, [handlePropertySelect]);
@ -246,7 +259,7 @@ export function PropertyInput({
: 'hover:bg-gray-50 border-l-4 border-transparent'
}
`}
onClick={() => handleSuggestionClick(suggestion)}
onClick={(event) => handleSuggestionClick(suggestion, event)}
onMouseEnter={() => setSelectedIndex(index)}
>
<div className="flex items-center justify-between">