Firefox, Touch: Fix not being able to open style dropdowns (#2092)

This PR places a bandaid over a radix issue.

On firefox, when using a touch screen, certain dropdowns in the style
menu would immediately close after opening. This is because the
'touchup' event was closing them.

We can do a dodgy fix by preventing the touch up event.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. On firefox, use a touch device (this can be firefox devtools on a
mac)
2. Draw an arrow and a geo shape.
3. Select both of them.
4. Open the style menu.
5. Make sure you can open the arrowhead dropdown.
6. Make sure you can open the geo shape type dropdown.

### Release Notes

- Firefox Mobile: Fixed a bug where you couldn't open some style
dropdown options.

packages/tldraw/src/lib/ui/components/StylePanel/DoubleDropdownPicker.tsx

@@ -1,5 +1,5 @@
 import { Trigger } from '@radix-ui/react-dropdown-menu'
-import { SharedStyle, StyleProp } from '@tldraw/editor'
+import { SharedStyle, StyleProp, preventDefault } from '@tldraw/editor'
 import classNames from 'classnames'
 import * as React from 'react'
 import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'
@@ -61,7 +61,11 @@ export const DoubleDropdownPicker = React.memo(function DoubleDropdownPicker<T e
 				{msg(label)}
 			</div>
 			<DropdownMenu.Root id={`style panel ${uiTypeA} A`}>
-				<Trigger asChild>
+				<Trigger
+					asChild
+					// Firefox fix: Stop the dropdown immediately closing after touch
+					onTouchEnd={(e) => preventDefault(e)}
+				>
 					<Button
 						data-testid={`style.${uiTypeA}`}
 						title={
@@ -104,7 +108,11 @@ export const DoubleDropdownPicker = React.memo(function DoubleDropdownPicker<T e
 				</DropdownMenu.Content>
 			</DropdownMenu.Root>
 			<DropdownMenu.Root id={`style panel ${uiTypeB}`}>
-				<Trigger asChild>
+				<Trigger
+					asChild
+					// Firefox fix: Stop the dropdown immediately closing after touch
+					onTouchEnd={(e) => preventDefault(e)}
+				>
 					<Button
 						data-testid={`style.${uiTypeB}`}
 						title={

packages/tldraw/src/lib/ui/components/StylePanel/DropdownPicker.tsx

@@ -1,5 +1,5 @@
 import { Trigger } from '@radix-ui/react-dropdown-menu'
-import { SharedStyle, StyleProp } from '@tldraw/editor'
+import { SharedStyle, StyleProp, preventDefault } from '@tldraw/editor'
 import classNames from 'classnames'
 import * as React from 'react'
 import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'
@@ -37,7 +37,11 @@ export const DropdownPicker = React.memo(function DropdownPicker<T extends strin
 
 	return (
 		<DropdownMenu.Root id={`style panel ${id}`}>
-			<Trigger asChild>
+			<Trigger
+				asChild
+				// Firefox fix: Stop the dropdown immediately closing after touch
+				onTouchEnd={(e) => preventDefault(e)}
+			>
 				<Button
 					data-testid={`style.${uiType}`}
 					title={