fix: Fixed autofill issue

Author: CrawlerCode

.prettierrc.json

@@ -4,5 +4,6 @@
   "semi": true,
   "singleQuote": false,
   "printWidth": 200,
-  "plugins": ["prettier-plugin-tailwindcss"]
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tailwindFunctions": ["clsx"]
 }

src/components/general/InputField.tsx

@@ -38,8 +38,9 @@ const InputField = forwardRef<HTMLInputElement, PropTypes>(({ size = "md", title
             "block w-full rounded-lg text-sm",
             "border border-gray-300 bg-gray-50 text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder:text-gray-400",
             "focus:outline-none focus:ring-2 focus:ring-primary-300 dark:focus:ring-primary-800",
+            "dark:autofill:shadow-[inset_0_0_0px_32px_rgb(55,65,81)]",
             {
-              "border-red-500 text-red-900 placeholder:text-red-700 dark:text-red-500 dark:placeholder:text-red-500 dark:border-red-500": error !== undefined,
+              "border-red-500 text-red-900 placeholder:text-red-700 dark:border-red-500 dark:text-red-500 dark:placeholder:text-red-500": error !== undefined,
               "pl-8": !!icon,
               "p-1.5": size === "sm",
               "p-2.5": size === "md",

src/components/general/SelectField.tsx

@@ -30,7 +30,7 @@ const SelectField = ({ size = "md", title, error, children, placeholder, classNa
         id={id}
         className={clsx(
           "block w-full rounded-lg text-sm",
-          "border border-gray-300 bg-gray-50 text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder:text-gray-400 ",
+          "border border-gray-300 bg-gray-50 text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder:text-gray-400",
           "focus:border-primary-300 focus:ring-primary-300 dark:focus:border-primary-800 dark:focus:ring-primary-800",
           {
             "p-1.5": size === "sm",

src/hooks/useHotkey.ts

@@ -3,6 +3,7 @@ import { useCallback, useEffect } from "react";
 const useHotKey = (callback: () => void, hotkey: { key?: string; code?: string; ctrl?: boolean }, prevent = true) => {
   const handleKeyPress = useCallback(
     (e: KeyboardEvent) => {
+      if (!e.key && !e.code) return;
       if ((hotkey.ctrl ? e.ctrlKey : true) && (e.key === hotkey.key || e.code === hotkey.code)) {
         callback();
         if (prevent) e.preventDefault();

src/provider/SettingsProvider.tsx

@@ -28,7 +28,7 @@ export const defaultSettings = {
 const SettingsContext = createContext({
   settings: defaultSettings,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  setSettings: (data: Settings) => undefined,
+  setSettings: (_data: Settings) => undefined,
 });
 
 const SettingsProvider = ({ children }: { children: ReactNode }) => {