MNPC/RasadDam_Frontend
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: AutoComplete click event on open icon

Browse Source
This commit is contained in:
Arman Tarhani
2026-02-10 15:11:45 +03:30
parent 59ae3b76d9
commit 63aed5572c
1 changed files with 18 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/AutoComplete/AutoComplete.tsx
View File

@@ -196,11 +196,11 @@ const AutoComplete: React.FC<AutoCompleteProps> = ({
if (window.visualViewport) { if (window.visualViewport) {
window.visualViewport.addEventListener( window.visualViewport.addEventListener(
"resize", "resize",
handleVisualViewportResize handleVisualViewportResize,
); );
window.visualViewport.addEventListener( window.visualViewport.addEventListener(
"scroll", "scroll",
handleVisualViewportScroll handleVisualViewportScroll,
); );
} }
const inputElement = inputRef.current; const inputElement = inputRef.current;
@@ -222,11 +222,11 @@ const AutoComplete: React.FC<AutoCompleteProps> = ({
if (window.visualViewport) { if (window.visualViewport) {
window.visualViewport.removeEventListener( window.visualViewport.removeEventListener(
"resize", "resize",
handleVisualViewportResize handleVisualViewportResize,
); );
window.visualViewport.removeEventListener( window.visualViewport.removeEventListener(
"scroll", "scroll",
handleVisualViewportScroll handleVisualViewportScroll,
); );
} }
const inputElement = inputRef.current; const inputElement = inputRef.current;
@@ -247,7 +247,7 @@ const AutoComplete: React.FC<AutoCompleteProps> = ({
target.closest(".select-group") && !clickedInsideCurrent; target.closest(".select-group") && !clickedInsideCurrent;
const clickedOnPortalDropdown = target.closest( const clickedOnPortalDropdown = target.closest(
`[data-autocomplete-portal="${uniqueId}"]` `[data-autocomplete-portal="${uniqueId}"]`,
); );
if (clickedOnAnotherAutocomplete) { if (clickedOnAnotherAutocomplete) {
@@ -318,7 +318,7 @@ const AutoComplete: React.FC<AutoCompleteProps> = ({
const preventTouchMove = (e: TouchEvent) => { const preventTouchMove = (e: TouchEvent) => {
const target = e.target as HTMLElement; const target = e.target as HTMLElement;
const dropdown = document.querySelector( const dropdown = document.querySelector(
`[data-autocomplete-portal="${uniqueId}"]` `[data-autocomplete-portal="${uniqueId}"]`,
); );
if (dropdown) { if (dropdown) {
@@ -326,7 +326,7 @@ const AutoComplete: React.FC<AutoCompleteProps> = ({
if (touch) { if (touch) {
const elementAtPoint = document.elementFromPoint( const elementAtPoint = document.elementFromPoint(
touch.clientX, touch.clientX,
touch.clientY touch.clientY,
); );
if ( if (
elementAtPoint && elementAtPoint &&
@@ -375,12 +375,12 @@ const AutoComplete: React.FC<AutoCompleteProps> = ({
setLocalInputValue(value); setLocalInputValue(value);
setIsTyping(true); setIsTyping(true);
const filtered = data.filter((item) => const filtered = data.filter((item) =>
item.value.toLowerCase().includes(value.toLowerCase()) item.value.toLowerCase().includes(value.toLowerCase()),
); );
setFilteredData(filtered); setFilteredData(filtered);
setShowOptions(true); setShowOptions(true);
}, },
[data] [data],
); );
const handleChange = useCallback( const handleChange = useCallback(
@@ -390,7 +390,7 @@ const AutoComplete: React.FC<AutoCompleteProps> = ({
if (onChangeValue && newSelectedKeys.length > 0) { if (onChangeValue && newSelectedKeys.length > 0) {
const selectedItem = data.find( const selectedItem = data.find(
(item) => item.key === newSelectedKeys[0] (item) => item.key === newSelectedKeys[0],
); );
if (selectedItem) { if (selectedItem) {
onChangeValue({ onChangeValue({
@@ -400,7 +400,7 @@ const AutoComplete: React.FC<AutoCompleteProps> = ({
} }
} }
}, },
[onChange, onChangeValue, data] [onChange, onChangeValue, data],
); );
const handleOptionClick = useCallback( const handleOptionClick = useCallback(
@@ -430,7 +430,7 @@ const AutoComplete: React.FC<AutoCompleteProps> = ({
setShowOptions(false); setShowOptions(false);
} }
}, },
[multiselect, handleChange] [multiselect, handleChange],
); );
const handleInputClick = useCallback(() => { const handleInputClick = useCallback(() => {
@@ -507,8 +507,8 @@ const AutoComplete: React.FC<AutoCompleteProps> = ({
item.originalGroupKey !== undefined item.originalGroupKey !== undefined
? item.originalGroupKey ? item.originalGroupKey
: String(item.key).startsWith("__group__") : String(item.key).startsWith("__group__")
? String(item.key).slice(11) ? String(item.key).slice(11)
: item.key; : item.key;
onGroupHeaderClick(groupKey); onGroupHeaderClick(groupKey);
} else if (!item.disabled) { } else if (!item.disabled) {
handleOptionClick(item.key); handleOptionClick(item.key);
@@ -523,8 +523,8 @@ const AutoComplete: React.FC<AutoCompleteProps> = ({
isGroupHeader && onGroupHeaderClick isGroupHeader && onGroupHeaderClick
? "cursor-pointer opacity-55 hover:bg-gray-100 text-dark-800 dark:text-dark-100 dark:hover:bg-primary-900/90 font-semibold bg-gray-200 dark:bg-primary-900" ? "cursor-pointer opacity-55 hover:bg-gray-100 text-dark-800 dark:text-dark-100 dark:hover:bg-primary-900/90 font-semibold bg-gray-200 dark:bg-primary-900"
: item.disabled : item.disabled
? "text-gray-400 dark:text-dark-500 cursor-not-allowed" ? "text-gray-400 dark:text-dark-500 cursor-not-allowed"
: "cursor-pointer hover:bg-primary-100 text-dark-800 dark:text-dark-100 dark:hover:bg-dark-700" : "cursor-pointer hover:bg-primary-100 text-dark-800 dark:text-dark-100 dark:hover:bg-dark-700"
} }
${ ${
isSelected && !isGroupHeader isSelected && !isGroupHeader
@@ -602,7 +602,7 @@ const AutoComplete: React.FC<AutoCompleteProps> = ({
> >
{dropdownOptions} {dropdownOptions}
</motion.ul>, </motion.ul>,
document.body document.body,
); );
}, [ }, [
showOptions, showOptions,
@@ -638,6 +638,7 @@ const AutoComplete: React.FC<AutoCompleteProps> = ({
placeholder={title || "انتخاب کنید..."} placeholder={title || "انتخاب کنید..."}
/> />
<ChevronDownIcon <ChevronDownIcon
onClick={handleInputClick}
className={`absolute left-3 text-dark-400 dark:text-dark-100 transition-transform duration-200 ${ className={`absolute left-3 text-dark-400 dark:text-dark-100 transition-transform duration-200 ${
showOptions ? "transform rotate-180" : "" showOptions ? "transform rotate-180" : ""
} ${getSizeStyles(size).icon}`} } ${getSizeStyles(size).icon}`}