fix: prevent pointer blocking behavior of chevron on dropdowns

laurelin60 · Jan 1, 2024 · 91fbca6 · 91fbca6
1 parent fd962a4
commit 91fbca6
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 16 deletions.
diff --git a/components/DropdownComponent.tsx b/components/DropdownComponent.tsx
@@ -67,7 +67,7 @@ export const DropdownComponentSearch = (props: DropdownComponentProps) => {
                         </option>
                     ))}
                 </select>
-                <div className="absolute right-2 top-[14px] h-8 w-8 text-2xl opacity-25 md:right-5 md:top-[18px] md:text-3xl">
+                <div className="pointer-events-none absolute right-2 top-[14px] h-8 w-8 text-2xl opacity-25 md:right-5 md:top-[18px] md:text-3xl">
                     <FaChevronDown />
                 </div>
             </div>

diff --git a/components/search/FilterComponents.tsx b/components/search/FilterComponents.tsx
@@ -262,7 +262,7 @@ export const SortDropdown = (props: SortDropdownProps) => {
                         <option key={item}>{item}</option>
                     ))}
                 </select>
-                <div className="absolute right-1 top-[14px] h-8 w-8 text-gray">
+                <div className="pointer-events-none absolute right-1 top-[14px] h-8 w-8 text-gray">
                     <FaChevronDown />
                 </div>
             </div>

diff --git a/components/search/ScrollToTop.tsx b/components/search/ScrollToTop.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from "react";
+import { FaChevronUp } from "react-icons/fa";
 
 const ScrollToTop = () => {
     const [isVisible, setIsVisible] = useState(false);
@@ -33,20 +34,7 @@ const ScrollToTop = () => {
             onClick={scrollToTop}
         >
             <div className="flex items-center justify-center">
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    className="h-6 w-6"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="white"
-                >
-                    <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M5 15l7-7 7 7"
-                    />
-                </svg>
+                <FaChevronUp style={{color: "white"}}/>
                 <span
                     className={
                         "hidden px-2 group-hover:inline-flex"