All changes

frontend/src/components/ui/DestinationDropdown.tsx

@@ -3,18 +3,21 @@ import {
   useRef,
   useEffect,
   useCallback,
-  useLayoutEffect,
   useMemo,
 } from 'react';
 import { createPortal } from 'react-dom';
 import type { Destination } from '../../hooks/useTravelDestinations';
+import { useDropdownPosition } from '../../hooks/useDropdownPosition';
 import { MapPinIcon } from './icons/MapPinIcon';
 import { ChevronIcon } from './icons/ChevronIcon';
+import { CloseIcon } from './icons/CloseIcon';
 
 interface DestinationDropdownProps {
   destinations: Destination[];
   loading: boolean;
   onSelect: (slug: string, label: string) => void;
+  onClear?: () => void;
+  value?: string;
   placeholder?: string;
 }
 
@@ -22,19 +25,18 @@ export function DestinationDropdown({
   destinations,
   loading,
   onSelect,
+  onClear,
+  value,
   placeholder = 'Select destination...',
 }: DestinationDropdownProps) {
   const [open, setOpen] = useState(false);
   const [filter, setFilter] = useState('');
   const [activeIndex, setActiveIndex] = useState(-1);
   const containerRef = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   const listRef = useRef<HTMLDivElement>(null);
-  const [pos, setPos] = useState<{
-    top: number;
-    left: number;
-    width: number;
-  } | null>(null);
+  const pos = useDropdownPosition(containerRef, open);
 
   const filtered = useMemo(() => {
     if (!filter) return destinations;
@@ -46,31 +48,14 @@ export function DestinationDropdown({
     );
   }, [destinations, filter]);
 
-  // Position the dropdown portal
-  const updatePos = useCallback(() => {
-    if (!containerRef.current) return;
-    const rect = containerRef.current.getBoundingClientRect();
-    setPos({ top: rect.bottom + 4, left: rect.left, width: rect.width });
-  }, []);
-
-  useLayoutEffect(() => {
-    if (!open) return;
-    updatePos();
-    window.addEventListener('scroll', updatePos, true);
-    window.addEventListener('resize', updatePos);
-    return () => {
-      window.removeEventListener('scroll', updatePos, true);
-      window.removeEventListener('resize', updatePos);
-    };
-  }, [open, updatePos]);
-
   // Close on outside click
   useEffect(() => {
     if (!open) return;
     const handler = (e: MouseEvent) => {
       if (
         containerRef.current &&
-        !containerRef.current.contains(e.target as Node)
+        !containerRef.current.contains(e.target as Node) &&
+        !dropdownRef.current?.contains(e.target as Node)
       ) {
         setOpen(false);
         setFilter('');
@@ -129,6 +114,7 @@ export function DestinationDropdown({
 
   const dropdown = open && (
     <div
+      ref={dropdownRef}
       className="bg-white dark:bg-warm-800 rounded shadow-lg border border-warm-200 dark:border-warm-700 overflow-hidden"
       style={
         pos
@@ -199,22 +185,37 @@ export function DestinationDropdown({
 
   return (
     <div ref={containerRef} className="relative">
-      <button
-        type="button"
-        onClick={handleOpen}
-        className="w-full flex items-center gap-1.5 px-2 py-1 text-xs rounded border border-warm-200 dark:border-warm-600 bg-white dark:bg-warm-800 text-warm-400 dark:text-warm-500 hover:border-warm-300 dark:hover:border-warm-500 outline-none focus:ring-1 focus:ring-teal-400"
-      >
-        {loading ? (
-          <div className="w-3 h-3 border-2 border-warm-300 dark:border-warm-600 border-t-teal-500 rounded-full animate-spin shrink-0" />
+      <div className={`w-full flex items-center gap-1.5 px-2 py-1 text-xs rounded border ${value ? 'border-warm-200 dark:border-warm-700 bg-warm-50 dark:bg-warm-800' : 'border-warm-200 dark:border-warm-600 bg-white dark:bg-warm-800 hover:border-warm-300 dark:hover:border-warm-500'}`}>
+        <button
+          type="button"
+          onClick={handleOpen}
+          className="flex items-center gap-1.5 flex-1 min-w-0 outline-none"
+        >
+          {loading ? (
+            <div className="w-3 h-3 border-2 border-warm-300 dark:border-warm-600 border-t-teal-500 rounded-full animate-spin shrink-0" />
+          ) : (
+            <MapPinIcon className={`w-3 h-3 shrink-0 ${value ? 'text-red-500' : 'text-warm-400 dark:text-warm-500'}`} />
+          )}
+          <span className={`flex-1 text-left truncate ${value ? 'text-navy-950 dark:text-warm-200' : 'text-warm-400 dark:text-warm-500'}`}>
+            {value || placeholder}
+          </span>
+        </button>
+        {value && onClear ? (
+          <button
+            type="button"
+            onClick={onClear}
+            className="text-warm-400 hover:text-warm-700 dark:hover:text-warm-300 shrink-0"
+            title="Clear destination"
+          >
+            <CloseIcon className="w-3 h-3" />
+          </button>
         ) : (
-          <MapPinIcon className="w-3 h-3 shrink-0" />
+          <ChevronIcon
+            direction={open ? 'up' : 'down'}
+            className="w-3 h-3 shrink-0 text-warm-400 dark:text-warm-500"
+          />
         )}
-        <span className="flex-1 text-left truncate">{placeholder}</span>
-        <ChevronIcon
-          direction={open ? 'up' : 'down'}
-          className="w-3 h-3 shrink-0"
-        />
-      </button>
+      </div>
 
       {open && createPortal(dropdown, document.body)}
     </div>