diff --git a/apps/antalmanac/src/components/Header/SettingsMenu.tsx b/apps/antalmanac/src/components/Header/SettingsMenu.tsx
index f4b72b6f9..c96a91771 100644
--- a/apps/antalmanac/src/components/Header/SettingsMenu.tsx
+++ b/apps/antalmanac/src/components/Header/SettingsMenu.tsx
@@ -3,7 +3,7 @@ import { Box, Button, ButtonGroup, Divider, Drawer, IconButton, Typography, useM
import { CSSProperties } from '@material-ui/core/styles/withStyles';
import { Close, DarkMode, LightMode, Settings, SettingsBrightness } from '@mui/icons-material';
-import { useThemeStore, useTimeFormatStore } from '$stores/SettingsStore';
+import { useAutofocusStore, useThemeStore, useTimeFormatStore } from '$stores/SettingsStore';
const lightSelectedStyle: CSSProperties = {
backgroundColor: '#F0F7FF',
@@ -92,7 +92,7 @@ function TimeMenu() {
return (
-
+
Time
@@ -135,6 +135,59 @@ function TimeMenu() {
);
}
+function AutofocusMenu() {
+ const [autoFocus, setAutofocus] = useAutofocusStore((store) => [store.autofocus, store.setAutofocus]);
+ const theme = useThemeStore((store) => store.appTheme);
+
+ const handleAutofocusChange = (event: React.MouseEvent) => {
+ setAutofocus(event.currentTarget.value == 'true');
+ };
+
+ return (
+
+
+ Autofocus Search
+
+
+
+
+
+
+
+ );
+}
+
function SettingsMenu() {
const [drawerOpen, setDrawerOpen] = useState(false);
const isMobileScreen = useMediaQuery('(max-width:750px)');
@@ -178,6 +231,7 @@ function SettingsMenu() {
+
>
diff --git a/apps/antalmanac/src/components/RightPane/CoursePane/SearchForm/FuzzySearch.tsx b/apps/antalmanac/src/components/RightPane/CoursePane/SearchForm/FuzzySearch.tsx
index bdcc8a0b1..b361f6429 100644
--- a/apps/antalmanac/src/components/RightPane/CoursePane/SearchForm/FuzzySearch.tsx
+++ b/apps/antalmanac/src/components/RightPane/CoursePane/SearchForm/FuzzySearch.tsx
@@ -8,6 +8,7 @@ type SearchResult = ReturnType;
import RightPaneStore from '../../RightPaneStore';
import analyticsEnum, { logAnalytics } from '$lib/analytics';
+import { useAutofocusStore } from '$stores/SettingsStore';
const emojiMap: Record = {
GE_CATEGORY: '🏫', // U+1F3EB :school:
@@ -182,7 +183,7 @@ class FuzzySearch extends PureComponent {
{
- if (input && !isMobile()) {
+ if (input && !isMobile() && useAutofocusStore.getState().autofocus) {
input.focus();
}
}}
diff --git a/apps/antalmanac/src/stores/SettingsStore.ts b/apps/antalmanac/src/stores/SettingsStore.ts
index 5ca0d6dd4..8f0ade53b 100644
--- a/apps/antalmanac/src/stores/SettingsStore.ts
+++ b/apps/antalmanac/src/stores/SettingsStore.ts
@@ -20,8 +20,8 @@ export const useThemeStore = create((set) => {
themeSetting !== 'system'
? themeSetting
: window.matchMedia('(prefers-color-scheme: dark)').matches
- ? 'dark'
- : 'light';
+ ? 'dark'
+ : 'light';
return {
themeSetting: themeSetting as 'light' | 'dark' | 'system',
@@ -35,8 +35,8 @@ export const useThemeStore = create((set) => {
themeSetting !== 'system'
? themeSetting
: window.matchMedia('(prefers-color-scheme: dark)').matches
- ? 'dark'
- : 'light';
+ ? 'dark'
+ : 'light';
set({ appTheme: appTheme, themeSetting: themeSetting });
@@ -67,3 +67,22 @@ export const useTimeFormatStore = create((set) => {
},
};
});
+
+export interface AutofocusStore {
+ autofocus: boolean;
+ setAutofocus: (autofocus: boolean) => void;
+}
+
+export const useAutofocusStore = create((set) => {
+ const autofocus = typeof Storage !== 'undefined' && window.localStorage.getItem('autofocus') == 'true';
+
+ return {
+ autofocus,
+ setAutofocus: (autofocus) => {
+ if (typeof Storage !== 'undefined') {
+ window.localStorage.setItem('autofocus', autofocus.toString());
+ }
+ set({ autofocus });
+ },
+ };
+});