Button fixed for safari

Author: MarcBaeuerle

frontend/src/utility/ToggleSelection.tsx

@@ -1,9 +1,5 @@
-import { useState } from "react";
-import edit from "../assets/edit.png";
 import Tooltip from "./Tooltip";
 
-const EXTRA_DEFAULT = "Custom";
-
 interface ToggleSelectionProps<T> {
   label: string;
   options: Array<T>;
@@ -25,33 +21,12 @@ const ToggleSelection = <T,>({
   setState,
   currentState,
   capitalize = false,
-  extraInput = false,
   flexGrow = false,
   disabled = [],
   zIndex = '', // FIX: Horrible implementation but don't want to waste time on a z-index
   color = 'None'
 }: ToggleSelectionProps<T>) => {
 
-  const [extra, setExtra] = useState(EXTRA_DEFAULT);
-
-  const extraFocus = (value: any, initial: boolean = false) => {
-    setExtra((initial && value == EXTRA_DEFAULT) ? "" : value);
-    if (value == Number(value)) setState(value as unknown as T);
-  }
-
-  const extraUnfocus = (value: any) => {
-    if (value === "") {
-      setExtra(EXTRA_DEFAULT);
-      setState(options[0]);
-      return;
-    }
-
-    setExtra(value);
-
-    const isNumber = !isNaN(value);
-    setState(isNumber ? value : options[0]);
-  };
-
   // Tailwind no dynamic class generation moment
   let border = 'border-hpi-orange';
   let borderHover = 'hover:border-b-hpi-orange/30'
@@ -70,7 +45,7 @@ const ToggleSelection = <T,>({
       {options.map((option, index) => (
         <button
           key={String(option)}
-          onFocus={() => setState(option)}
+          onMouseDown={() => setState(option)} 
           disabled={disabled.includes(option)}
           className={`border-b-4 duration-150 ${zIndex}
 ${flexGrow ? 'flex-1' : 'px-4'}
@@ -84,24 +59,6 @@ ${disabled.includes(option) ? "cursor-not-allowed text-gray-300 hover:border-b-t
           </Tooltip>
         </button>
       ))}
-      { extraInput &&
-        <div className={`flex group border-b-4 justify-evenly items-start flex-1 duration-150 ${
-currentState == extra ?
-`${color == 'New' ? 'border-b-hpi-new ' : 'border-b-hpi-current'}` :
-'border-b-transparent'
-}`}>
-          <input type="text" className={`
-${currentState == extra ? `${border} font-bold` : `border-b-transparent ${borderHover}`}
-cursor-pointer text-center duration-150 
-${color == 'New' ? 'focus:outline-hpi-new/30' : 'focus:outline-hpi-current/30'}
-w-14`}
-            onFocus={(e) => extraFocus(e.target.value, true)}
-            onChange={(e) => extraFocus(e.target.value)}
-            onBlur={(e) => extraUnfocus(e.target.value)}
-            value={extra} />
-          <img src={edit} className="h-5" />
-        </div>
-      }
     </div>
   );
 };