From 94dada8c42f66e7f65ef192e83dd7bf8cfd42ad2 Mon Sep 17 00:00:00 2001
From: themancalledjakob <jakob@jrkb.land>
Date: Tue, 2 May 2023 13:58:48 +0200
Subject: [PATCH] input to multiline

---
 .../SingleRowPropEditor.tsx                          |  2 +-
 .../src/uiComponents/form/BasicStringInput.tsx       | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/SingleRowPropEditor.tsx b/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/SingleRowPropEditor.tsx
index e79e3d6..82a4e34 100644
--- a/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/SingleRowPropEditor.tsx
+++ b/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/SingleRowPropEditor.tsx
@@ -18,7 +18,7 @@ const Container = deriver(styled.div<{
   isHighlighted: PropHighlighted
 }>`
   display: flex;
-  height: 30px;
+  min-height: 30px;
   justify-content: flex-start;
   align-items: stretch;
   // We cannot calculate both the container (details panel) width and the descendant
diff --git a/theatre/studio/src/uiComponents/form/BasicStringInput.tsx b/theatre/studio/src/uiComponents/form/BasicStringInput.tsx
index 0ba157c..4a33ba6 100644
--- a/theatre/studio/src/uiComponents/form/BasicStringInput.tsx
+++ b/theatre/studio/src/uiComponents/form/BasicStringInput.tsx
@@ -6,7 +6,7 @@ import mergeRefs from 'react-merge-refs'
 import useRefAndState from '@theatre/studio/utils/useRefAndState'
 import useOnClickOutside from '@theatre/studio/uiComponents/useOnClickOutside'
 
-const Input = styled.input.attrs({type: 'text'})`
+const StyledTextarea = styled.textarea.attrs({type: 'text'})`
   background: transparent;
   border: 1px solid transparent;
   color: rgba(0, 146, 255, 1);
@@ -59,7 +59,7 @@ const BasicStringInput: React.FC<{
   permanentlySetValue: (v: string) => void
   className?: string
   isValid?: (v: string) => boolean
-  inputRef?: MutableRefObject<HTMLInputElement | null>
+  inputRef?: MutableRefObject<HTMLTextAreaElement | null>
   /**
    * Called when the user hits Enter. One of the *SetValue() callbacks will be called
    * before this, so use this for UI purposes such as closing a popover.
@@ -73,7 +73,7 @@ const BasicStringInput: React.FC<{
   const propsRef = useRef(props)
   propsRef.current = props
 
-  const inputRef = useRef<HTMLInputElement | null>(null)
+  const inputRef = useRef<HTMLTextAreaElement | null>(null)
 
   useOnClickOutside(
     inputRef.current,
@@ -85,7 +85,7 @@ const BasicStringInput: React.FC<{
 
   const callbacks = useMemo(() => {
     const inputChange = (e: React.ChangeEvent) => {
-      const target = e.target as HTMLInputElement
+      const target = e.target as HTMLTextAreaElement
       const {value} = target
       const curState = stateRef.current as IState_EditingViaKeyboard
 
@@ -124,7 +124,7 @@ const BasicStringInput: React.FC<{
         propsRef.current.discardTemporaryValue()
         stateRef.current = {mode: 'noFocus'}
         inputRef.current!.blur()
-      } else if (e.key === 'Enter' || e.key === 'Tab') {
+      } else if (e.key === 'Tab') {
         commitKeyboardInput()
         inputRef.current!.blur()
       }
@@ -186,7 +186,7 @@ const BasicStringInput: React.FC<{
   if (props.inputRef) _refs.push(props.inputRef)
 
   const theInput = (
-    <Input
+    <StyledTextarea
       key="input"
       type="text"
       className={`${props.className ?? ''} ${!isValid(value) ? 'invalid' : ''}`}