TootComposer: stops propagation of touch and wheel

src/timelines/TootComposer.tsx

@@ -42,11 +42,13 @@ import { useLanguage } from "../platform/i18n";
 import iso639_1 from "iso-639-1";
 import ChooseTootLang from "./ChooseTootLang";
 import type { mastodon } from "masto";
+import cardStyles from "../material/cards.module.css";
 
 type TootVisibility = "public" | "unlisted" | "private" | "direct";
 
 const TootVisibilityPickerDialog: Component<{
   open?: boolean;
+  class?: string;
   onClose: () => void;
   visibility: TootVisibility;
   onVisibilityChange: (value: TootVisibility) => void;
@@ -76,7 +78,12 @@ const TootVisibilityPickerDialog: Component<{
   };
 
   return (
-    <BottomSheet open={props.open} onClose={props.onClose} bottomUp>
+    <BottomSheet
+      open={props.open}
+      onClose={props.onClose}
+      bottomUp
+      class={props.class}
+    >
       <Scaffold
         bottom={
           <div
@@ -163,12 +170,13 @@ const TootVisibilityPickerDialog: Component<{
 
 const TootLanguagePickerDialog: Component<{
   open?: boolean;
+  class?: string;
   onClose: () => void;
   code: string;
   onCodeChange: (nval: string) => void;
 }> = (props) => {
   return (
-    <BottomSheet open={props.open} onClose={props.onClose}>
+    <BottomSheet open={props.open} onClose={props.onClose} class={props.class}>
       <Show when={props.open}>
         <ChooseTootLang
           code={props.code}
@@ -188,6 +196,10 @@ function randomChoose<T extends any[]>(
   return K[idx];
 }
 
+function cancelEvent(event: Event) {
+  event.stopPropagation();
+}
+
 const TootComposer: Component<{
   ref?: Ref<HTMLDivElement>;
   style?: JSX.CSSProperties;
@@ -301,7 +313,15 @@ const TootComposer: Component<{
       ref={props.ref}
       class={tootComposers.composer}
       style={containerStyle()}
-      onClick={(e) => inputRef.focus()}
+      onClick={() => {
+        inputRef.focus();
+      }}
+      on:touchend={
+        cancelEvent
+        /* on: is required to register the event handler on the exact element */
+      }
+      on:touchmove={cancelEvent}
+      on:wheel={cancelEvent}
     >
       <div class={tootComposers.replyInput}>
         <Show when={props.profile}>
@@ -365,6 +385,7 @@ const TootComposer: Component<{
         </div>
 
         <TootVisibilityPickerDialog
+          class={cardStyles.cardNoPad}
           open={permPicker()}
           onClose={() => setPermPicker(false)}
           visibility={visibility()}
@@ -372,6 +393,7 @@ const TootComposer: Component<{
         />
 
         <TootLanguagePickerDialog
+          class={cardStyles.cardNoPad}
           open={langPickerOpen()}
           onClose={() => setLangPickerOpen(false)}
           code={language()}