fix: popup select for Firefox

GODrums · Oct 31, 2024 · 777724e · 777724e
1 parent 5727df7
commit 777724e
Show file tree

Hide file tree

Showing 2 changed files with 111 additions and 19 deletions.
diff --git a/src/lib/components/SettingsAltMarket.tsx b/src/lib/components/SettingsAltMarket.tsx
@@ -23,6 +23,8 @@ export const SettingsAltMarket = ({ prefix, sources, primarySource }: SelectProp
 	const [value, setValue] = useStorage<MarketSource>(id, (s) => (s === undefined ? MarketSource.None : s));
 	const [currentSource, setCurrentSource] = useState(sources[0]);
 
+	const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+
 	// create a 'none' source on demand
 	if (sources[0].text !== 'None') {
 		sources.unshift(defaultSource);
@@ -47,6 +49,58 @@ export const SettingsAltMarket = ({ prefix, sources, primarySource }: SelectProp
 		setCurrentSource(sources.find((s) => value.includes(s.source)) ?? sources[0]);
 	}, [value]);
 
+	const AltMarketSelectChrome = () => {
+		return (
+			<Select value={value} onValueChange={onValueChange}>
+				<SelectTrigger>
+					<SelectValue aria-label={value.toString()}>
+						<span className="text-xs">{currentSource.text}</span>
+					</SelectValue>
+				</SelectTrigger>
+				<SelectContent className="w-[90px]" position="popper" sideOffset={2} align="end">
+					{sources.map((source, index) => (
+						<SelectItem key={index} value={source.source}>
+							<div className="flex items-center justify-center gap-2">
+								<img src={source.logo} alt={source.text} className="size-6 rounded-lg" />
+								<span className="text-xs">{source.text}</span>
+							</div>
+						</SelectItem>
+					))}
+				</SelectContent>
+			</Select>
+		);
+	};
+
+	const AltMarketSelectFirefox = () => {
+		// Firefox is a bit special and needs a state to handle the dropdown
+		const [open, setOpen] = useState(false);
+
+		const onValueChange = (value: MarketSource) => {
+			setValue(value);
+			setOpen(false);
+		};
+
+		return (
+			<Select open={open} value={value} onValueChange={onValueChange}>
+				<SelectTrigger onClick={() => setOpen(!open)}>
+					<SelectValue aria-label={value.toString()}>
+						<span className="text-xs">{currentSource.text}</span>
+					</SelectValue>
+				</SelectTrigger>
+				<SelectContent className="w-[90px]" position="popper" sideOffset={2} align="end">
+					{sources.map((source, index) => (
+						<SelectItem key={index} value={source.source}>
+							<div className="flex items-center justify-center gap-2">
+								<img src={source.logo} alt={source.text} className="size-6 rounded-lg" />
+								<span className="text-xs">{source.text}</span>
+							</div>
+						</SelectItem>
+					))}
+				</SelectContent>
+			</Select>
+		);
+	};
+
 	return (
 		<div className="flex justify-between items-center align-middle gap-4 mt-2">
 			<div className="flex items-center gap-2">
@@ -56,23 +110,7 @@ export const SettingsAltMarket = ({ prefix, sources, primarySource }: SelectProp
 				<SettingsTooltip text="The market to use whenever the primary market cannot provide a price. For example, Buff does not support cases/capsules/packages, and the Steam Market has a item price limit of $2000.">
 					<MaterialSymbolsHelpOutline className="h-6 w-6" />
 				</SettingsTooltip>
-				<Select value={value} onValueChange={onValueChange}>
-					<SelectTrigger>
-						<SelectValue aria-label={value.toString()}>
-							<span className="text-xs">{currentSource.text}</span>
-						</SelectValue>
-					</SelectTrigger>
-					<SelectContent className="w-[90px]" position="popper" sideOffset={2} align="end">
-						{sources.map((source, index) => (
-							<SelectItem key={index} value={source.source}>
-								<div className="flex items-center justify-center gap-2">
-									<img src={source.logo} alt={source.text} className="size-6 rounded-lg" />
-									<span className="text-xs">{source.text}</span>
-								</div>
-							</SelectItem>
-						))}
-					</SelectContent>
-				</Select>
+				{isFirefox ? <AltMarketSelectFirefox /> : <AltMarketSelectChrome />}
 			</div>
 		</div>
 	);

diff --git a/src/lib/components/SettingsSelect.tsx b/src/lib/components/SettingsSelect.tsx
@@ -1,6 +1,6 @@
 import { useStorage } from '@plasmohq/storage/hook';
 import type { IconProps } from '@radix-ui/react-icons/dist/types';
-import { type ReactElement, useEffect } from 'react';
+import { type ReactElement, useEffect, useState } from 'react';
 import { MaterialSymbolsHelpOutline } from '~lib/components/Icons';
 import { SettingsTooltip } from './SettingsTooltip';
 import { Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './Shadcn';
@@ -13,7 +13,13 @@ type SelectProps = {
 	tooltipText?: string;
 };
 
-export const SettingsSelect = ({ id, text, options, icon, tooltipText }: SelectProps) => {
+export const SettingsSelect = (props: SelectProps) => {
+	const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+
+	return isFirefox ? <SettingsSelectFirefox {...props} /> : <SettingsSelectChrome {...props} />;
+};
+
+export const SettingsSelectChrome = ({ id, text, options, icon, tooltipText }: SelectProps) => {
 	const [value, setValue] = useStorage(id);
 
 	let width = options[value ?? 0].length * 8 + 50 + 'px';
@@ -52,3 +58,51 @@ export const SettingsSelect = ({ id, text, options, icon, tooltipText }: SelectP
 		</div>
 	);
 };
+export const SettingsSelectFirefox = ({ id, text, options, icon, tooltipText }: SelectProps) => {
+	const [value, setValue] = useStorage(id);
+	// Firefox is a bit special and needs a state to handle the dropdown
+	const [open, setOpen] = useState(false);
+
+	const optionsIsString = typeof options[0] === 'string';
+
+	let width = optionsIsString ? (options[value ?? 0] as unknown as string[]).length * 8 + 50 + 'px' : '120px';
+
+	const onValueChange = (value: string) => {
+		setValue(value);
+		setOpen(false);
+	};
+
+	useEffect(() => {
+		width = optionsIsString ? (options[value ?? 0] as unknown as string[]).length * 8 + 50 + 'px' : '120px';
+	}, [value]);
+
+	return (
+		<div className="flex justify-between items-center align-middle gap-4">
+			<div className="flex items-center gap-2">
+				{icon}
+				<Label htmlFor={id}>{text}</Label>
+			</div>
+			<div className="flex items-center gap-2">
+				{tooltipText && (
+					<SettingsTooltip text={tooltipText}>
+						<MaterialSymbolsHelpOutline className="h-6 w-6" />
+					</SettingsTooltip>
+				)}
+				<Select open={open} value={value} onValueChange={onValueChange}>
+					<SelectTrigger style={{ width: width }} onClick={() => setOpen(!open)}>
+						<SelectValue aria-label={value}>
+							<SelectValue>{options[value ?? 0]}</SelectValue>
+						</SelectValue>
+					</SelectTrigger>
+					<SelectContent className="w-[80px]" position="popper" sideOffset={2} align="end">
+						{options.map((option, index) => (
+							<SelectItem key={index} value={index.toString()}>
+								{option}
+							</SelectItem>
+						))}
+					</SelectContent>
+				</Select>
+			</div>
+		</div>
+	);
+};