Fix DMs input automatically accepting autocomplete suggestion instead of clearing (#7796)

* fix input not clearing when autocomplete suggestion active

* fix up storybook

* restore web focus hack

src/view/screens/Storybook/Forms.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {View} from 'react-native'
+import {TextInput, View} from 'react-native'
 
 import {atoms as a} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
@@ -19,6 +19,8 @@ export function Forms() {
   const [value, setValue] = React.useState('')
   const [date, setDate] = React.useState('2001-01-01')
 
+  const inputRef = React.useRef<TextInput>(null)
+
   return (
     <View style={[a.gap_4xl, a.align_start]}>
       <H1>Forms</H1>
@@ -33,22 +35,23 @@ export function Forms() {
         />
 
         <View style={[a.flex_row, a.align_start, a.gap_sm]}>
-          <View
-            style={[
-              {
-                width: '50%',
-              },
-            ]}>
+          <View style={[a.flex_1]}>
             <TextField.Root>
               <TextField.Icon icon={Globe} />
               <TextField.Input
+                inputRef={inputRef}
                 value={value}
                 onChangeText={setValue}
                 label="Text field"
               />
             </TextField.Root>
           </View>
-          <Button label="Submit" size="large" variant="solid" color="primary">
+          <Button
+            label="Submit"
+            size="large"
+            variant="solid"
+            color="primary"
+            onPress={() => inputRef.current?.clear()}>
             <ButtonText>Submit</ButtonText>
           </Button>
         </View>

src/view/screens/Storybook/index.tsx

@@ -1,13 +1,11 @@
 import React from 'react'
-import {ScrollView, View} from 'react-native'
+import {View} from 'react-native'
 import {useNavigation} from '@react-navigation/native'
 
 import {NavigationProp} from '#/lib/routes/types'
-import {isWeb} from '#/platform/detection'
 import {useSetThemePrefs} from '#/state/shell'
-import {CenteredView} from '#/view/com/util/Views'
 import {ListContained} from '#/view/screens/Storybook/ListContained'
-import {atoms as a, ThemeProvider, useTheme} from '#/alf'
+import {atoms as a, ThemeProvider} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Layout from '#/components/Layout'
 import {Admonitions} from './Admonitions'
@@ -27,25 +25,27 @@ import {Typography} from './Typography'
 export function Storybook() {
   return (
     <Layout.Screen>
-      {isWeb ? (
+      <Layout.Header.Outer>
+        <Layout.Header.BackButton />
+        <Layout.Header.Content>
+          <Layout.Header.TitleText>Storybook</Layout.Header.TitleText>
+        </Layout.Header.Content>
+        <Layout.Header.Slot />
+      </Layout.Header.Outer>
+      <Layout.Content keyboardShouldPersistTaps="handled">
         <StorybookInner />
-      ) : (
-        <ScrollView>
-          <StorybookInner />
-        </ScrollView>
-      )}
+      </Layout.Content>
     </Layout.Screen>
   )
 }
 
 function StorybookInner() {
-  const t = useTheme()
   const {setColorMode, setDarkTheme} = useSetThemePrefs()
   const [showContainedList, setShowContainedList] = React.useState(false)
   const navigation = useNavigation<NavigationProp>()
 
   return (
-    <CenteredView style={[t.atoms.bg]}>
+    <>
       <View style={[a.p_xl, a.gap_5xl, {paddingBottom: 100}]}>
         {!showContainedList ? (
           <>
@@ -100,10 +100,6 @@ function StorybookInner() {
               <ButtonText>Open Shared Prefs Tester</ButtonText>
             </Button>
 
-            <Admonitions />
-
-            <Settings />
-
             <ThemeProvider theme="light">
               <Theming />
             </ThemeProvider>
@@ -126,6 +122,8 @@ function StorybookInner() {
             <Menus />
             <Breakpoints />
             <Dialogs />
+            <Admonitions />
+            <Settings />
 
             <Button
               variant="solid"
@@ -150,6 +148,6 @@ function StorybookInner() {
           </>
         )}
       </View>
-    </CenteredView>
+    </>
   )
 }