Better fix the create market focus issues. Expand to 4 lines when you add many chars to a question.

web/components/feed-create.tsx

@@ -1,5 +1,6 @@
+import { SparklesIcon, XIcon } from '@heroicons/react/solid'
 import { Avatar } from './avatar'
-import { useEffect, useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 import { Spacer } from './layout/spacer'
 import { NewContract } from '../pages/create'
 import { firebaseLogin, User } from '../lib/firebase/users'
@@ -7,7 +8,6 @@ import { ContractsGrid } from './contracts-list'
 import { Contract } from '../../common/contract'
 import { Col } from './layout/col'
 import clsx from 'clsx'
-import { SparklesIcon } from '@heroicons/react/solid'
 import { Row } from './layout/row'
 
 export function FeedPromo(props: { hotContracts: Contract[] }) {
@@ -69,7 +69,8 @@ export default function FeedCreate(props: {
 }) {
   const { user, tag, className } = props
   const [question, setQuestion] = useState('')
-  const [focused, setFocused] = useState(false)
+  const [isExpanded, setIsExpanded] = useState(false)
+  const inputRef = useRef<HTMLTextAreaElement | null>()
 
   const placeholders = [
     'Will anyone I know get engaged this year?',
@@ -86,60 +87,60 @@ export default function FeedCreate(props: {
   )
   const placeholder = props.placeholder ?? `e.g. ${placeholders[randIndex]}`
 
-  const panelRef = useRef<HTMLElement | null>()
-  const inputRef = useRef<HTMLTextAreaElement | null>()
-
-  useEffect(() => {
-    const onClick = () => {
-      if (
-        panelRef.current &&
-        document.activeElement &&
-        !panelRef.current.contains(document.activeElement)
-      )
-        setFocused(false)
-    }
-    window.addEventListener('click', onClick)
-    return () => window.removeEventListener('click', onClick)
-  })
-
   return (
     <div
       className={clsx(
-        'mt-2 w-full rounded bg-white p-4 shadow-md',
+        'mt-2 w-full rounded bg-white p-4 shadow-md cursor-text',
-        question || focused ? 'ring-2 ring-indigo-300' : '',
+        isExpanded ? 'ring-2 ring-indigo-300' : '',
         className
       )}
-      onClick={() => !focused && !question && inputRef.current?.focus()}
+      onClick={() => {
-      ref={(elem) => (panelRef.current = elem)}
+        !isExpanded && inputRef.current?.focus()
+      }}
     >
       <div className="relative flex items-start space-x-3">
         <Avatar username={user?.username} avatarUrl={user?.avatarUrl} noLink />
 
         <div className="min-w-0 flex-1">
-          {/* TODO: Show focus, for accessibility */}
+          <Row className="justify-between">
-          <div>
             <p className="my-0.5 text-sm">Ask a question... </p>
-          </div>
+            {isExpanded && (
+              <button
+                className="btn btn-xs btn-circle btn-ghost rounded"
+                onClick={() => setIsExpanded(false)}
+              >
+                <XIcon
+                  className="mx-auto h-6 w-6 text-gray-500"
+                  aria-hidden="true"
+                />
+              </button>
+            )}
+          </Row>
           <textarea
             ref={inputRef as any}
-            className="w-full resize-none appearance-none border-transparent bg-transparent p-0 text-lg text-indigo-700 placeholder:text-gray-400 focus:border-transparent focus:ring-transparent sm:text-xl"
+            className={clsx(
+              'w-full resize-none appearance-none border-transparent bg-transparent p-0 text-indigo-700 placeholder:text-gray-400 focus:border-transparent focus:ring-transparent',
+              question && 'text-lg sm:text-xl',
+              !question && 'text-base sm:text-lg'
+            )}
             placeholder={placeholder}
             value={question}
+            rows={question.length > 68 ? 4 : 2}
             onClick={(e) => e.stopPropagation()}
             onChange={(e) => setQuestion(e.target.value.replace('\n', ''))}
-            onFocus={() => setFocused(true)}
+            onFocus={() => setIsExpanded(true)}
           />
         </div>
       </div>
 
       {/* Hide component instead of deleting, so edits to NewContract don't get lost */}
-      <div className={question || focused ? '' : 'hidden'}>
+      <div className={isExpanded ? '' : 'hidden'}>
         <NewContract question={question} tag={tag} />
       </div>
 
       {/* Show a fake "Create Market" button, which gets replaced with the NewContract one*/}
-      {!(question || focused) && (
+      {!isExpanded && (
-        <div className="flex justify-end">
+        <div className="flex justify-end sm:-mt-4">
           <button className="btn btn-sm" disabled>
             Create Market
           </button>