fix(select-field): prevent ghost clicks on touch devices

Author: AlessiaCaironi

packages/bento-design-system/src/SelectField/components.tsx

@@ -228,8 +228,20 @@ export function MenuList<A extends { disabled?: boolean }>(props: MenuListProps<
 }
 
 export function Option<B, A extends SelectOption<B>>(props: OptionProps<A>) {
+  const { innerProps } = props;
+
   return (
-    <defaultComponents.Option {...props}>
+    <defaultComponents.Option
+      {...props}
+      innerProps={{
+        ...innerProps,
+        // On touch devices, prevent the browser from synthesizing a follow-up click
+        // that could hit whatever is behind the menu after it closes.
+        onTouchEnd: (e) => {
+          e.preventDefault();
+        },
+      }}
+    >
       <ListItem
         {...props.data}
         size={props.selectProps.menuSize ?? "medium"}