logHtml error

libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx

@@ -129,12 +129,12 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
         if (output) scriptRunnerDispatch({ type: 'script', payload: { message: '5' } })
       })
     }, { activate: true }, dispatch)
-  }, [props.thisState.autoCompletePopup, autoCompletState.text, props.logHtml])
+  }, [props.thisState.autoCompletePopup, autoCompletState.text])
 
   useEffect(() => {
     scrollToBottom()
     console.log({ messagesEndRef: messagesEndRef.current }, ' onScroll')
-  }, [newstate.journalBlocks.length])
+  }, [newstate.journalBlocks.length, props.logHtml.length])
 
   function execute (file, cb) {
     console.log('called execute scriptRunner')
@@ -261,8 +261,9 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
         setAutoCompleteState(prevState => ({ ...prevState, activeSuggestion: 0, showSuggestions: false, userInput: Object.keys(autoCompletState.data._options[0]).toString() }))
       } else {
         console.log(autoCompletState.activeSuggestion, 'autoCompletState.userInput.length')
-        setAutoCompleteState(prevState => ({ ...prevState, activeSuggestion: 0, showSuggestions: false, userInput: Object.keys(autoCompletState.data._options[autoCompletState.activeSuggestion]).toString() }))
+        setAutoCompleteState(prevState => ({ ...prevState, activeSuggestion: 0, showSuggestions: false, userInput: inputEl.current.value }))
       }
+      console.log({ autoCompletState }, 'autoCompletState')
     }
     if (event.which === 13 && !autoCompletState.showSuggestions) {
       if (event.ctrlKey) { // <ctrl+enter>
@@ -883,11 +884,11 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
                   return (<div className='px-4 block' data-id={`block_tx${trans.tx.hash}`} key={index}> {renderKnownTransactions(trans.tx, trans.receipt, trans.resolvedData, trans.logs, index)} </div>)
                 })
               } else {
-                return (
-                  <div className="px-4 block" data-id="block_null" key={index}>
-                    <span className={x.style}>{x.message}</span>
-                  </div>
-                )
+                return x.message.map((x, i) => {
+                  return (
+                    <div className="px-4 block" data-id="block_null" key={i}>{ x }</div>
+                  )
+                })
               }
             })}
             <div ref={messagesEndRef} />