fix: prevent redirect on dropdown item clicks

src/components/Dropdown/DropdownItem.tsx

@@ -3,6 +3,7 @@ import { useDropdownContext } from './DropdownContext';
 import { FocusedItemData, useFocusContext } from './FocusContext';
 import { generateDropdownId } from './generateDropdownId';
 import { useInputContext } from './InputContext';
+import { twMerge } from '../../hooks/useComposedCssClasses';
 
 /**
  * Props for the {@link DropdownItem}.
@@ -69,19 +70,25 @@ export function DropdownItemWithIndex(props: DropdownItemProps & { index: number
     value
   ]);
 
+  const baseButtonClasses = 'bg-transparent border-0 p-0 m-0 font-inherit text-inherit text-left '
+    + 'cursor-pointer w-full self-stretch box-border';
+  const combinedClassName = twMerge(
+    baseButtonClasses,
+    isFocused ? focusedClassName ?? '' : className ?? ''
+  );
+
   return (
-    // eslint-disable-next-line jsx-a11y/anchor-is-valid
-    <a
+    <button
       id={generateDropdownId(screenReaderUUID, index)}
-      href="#"
+      type="button"
       tabIndex={-1}
-      className={isFocused ? focusedClassName : className}
+      className={combinedClassName}
       onClick={handleClick}
       aria-label={typeof ariaLabel === 'function' ? ariaLabel(value) : ariaLabel}
       role="option"
       aria-selected={isFocused}
     >
       {children}
-    </a>
+    </button>
   );
 }

test-site/src/pages/LocationsPage.tsx

@@ -71,7 +71,7 @@ export function LocationsPage() {
         top: scrollTop,
         behavior: "smooth",
       });
-    } 
+    }
   }, [resultsRef.current, resultsContainer])
 
   const markerOptionsOverride = useCallback((selected: boolean) => {
@@ -90,7 +90,8 @@ export function LocationsPage() {
         label='FilterSearch Location Filter'
         customCssClasses={
           {
-            currentLocationAndInputContainer: 'w-1/5'
+            currentLocationAndInputContainer: 'w-1/5',
+            focusedOption: 'bg-red-500'
           }
         }
         showCurrentLocationButton={true}
@@ -146,4 +147,4 @@ export function LocationsPage() {
   //     </div>
   //   </div>
   // )
-}
+}

test-site/src/pages/UniversalPage.tsx

@@ -58,7 +58,8 @@ const universalVerticalConfigMap = {
 };
 
 const customSearchBarCss = {
-  searchBarContainer: 'mb-3 text-emerald-800'
+  searchBarContainer: 'mb-3 text-emerald-800',
+  focusedOption: "bg-emerald-200",
 };
 
 function CustomCitationCard(props: CitationProps): React.JSX.Element | null {
@@ -95,7 +96,7 @@ export default function UniversalPage(): React.JSX.Element {
         universalAutocompleteLimit={20}
       />
       <SpellCheck />
-      <GenerativeDirectAnswer 
+      <GenerativeDirectAnswer
         answerHeader='A custom answer header'
         CitationCard={CustomCitationCard}
       />
@@ -130,4 +131,4 @@ export default function UniversalPage(): React.JSX.Element {
       /> */}
     </div>
   );
-}
+}