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 + inputRef?: MutableRefObject /** * 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(null) + const inputRef = useRef(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 = ( -