Fixes a regression that would unfocus from the history input (#615)

* Fixes a regression that would unfocus from the history input

* remove debug statements

* Update historyinfo.tsx

* fix scrolling the right way

src/app/workspace/cmdinput/aichat.tsx

@@ -104,15 +104,11 @@ class AIChat extends React.Component<{}, {}> {
     }
 
     onTextAreaFocused(e: any) {
-        mobx.action(() => {
+        GlobalModel.inputModel.setAuxViewFocus(true);
-            GlobalModel.inputModel.setAuxViewFocus(true);
-        })();
     }
 
     onTextAreaBlur(e: any) {
-        mobx.action(() => {
+        GlobalModel.inputModel.setAuxViewFocus(false);
-            GlobalModel.inputModel.setAuxViewFocus(false);
-        })();
     }
 
     // Adjust the height of the textarea to fit the text

src/app/workspace/cmdinput/auxview.tsx

@@ -16,11 +16,12 @@ interface AuxiliaryCmdViewProps {
     titleBarContents?: React.ReactElement[];
     children?: React.ReactNode;
     onClose?: React.MouseEventHandler<HTMLDivElement>;
+    onScrollbarInitialized?: () => void;
     scrollable?: boolean;
 }
 
 export const AuxiliaryCmdView: React.FC<AuxiliaryCmdViewProps> = observer((props) => {
-    const { title, className, iconClass, titleBarContents, children, onClose } = props;
+    const { title, className, iconClass, titleBarContents, children, onClose, onScrollbarInitialized } = props;
 
     return (
         <div className={cn("auxview", className)}>
@@ -50,6 +51,8 @@ export const AuxiliaryCmdView: React.FC<AuxiliaryCmdViewProps> = observer((props
                         <OverlayScrollbarsComponent
                             className="auxview-content"
                             options={{ scrollbars: { autoHide: "leave" } }}
+                            defer={true}
+                            events={{ initialized: onScrollbarInitialized }}
                         >
                             {children}
                         </OverlayScrollbarsComponent>

src/app/workspace/cmdinput/cmdinput.tsx

@@ -73,7 +73,6 @@ class CmdInput extends React.Component<{}, {}> {
             return;
         }
         GlobalModel.inputModel.setAuxViewFocus(false);
-        GlobalModel.inputModel.giveFocus();
     }
 
     @boundMethod
@@ -232,12 +231,7 @@ class CmdInput extends React.Component<{}, {}> {
                         </Button>
                     </div>
                 </If>
-                <div
+                <div key="base-cmdinput" className="base-cmdinput" onClick={this.baseCmdInputClick}>
-                    key="base-cmdinput"
-                    className="base-cmdinput"
-                    onClick={this.baseCmdInputClick}
-                    onSelect={this.baseCmdInputClick}
-                >
                     <div className="cmdinput-actions">
                         <If condition={numRunningLines > 0}>
                             <div

src/app/workspace/cmdinput/historyinfo.less

@@ -20,8 +20,8 @@
 
     .history-items {
         color: var(--app-text-color);
-        height: 100%;
+        display: flex;
-        width: 100%;
+        flex-direction: column-reverse;
 
         .history-item {
             cursor: pointer;

src/app/workspace/cmdinput/historyinfo.tsx

@@ -154,7 +154,11 @@ class HistoryInfo extends React.Component<{}, {}> {
     lastClickTs: number = 0;
     containingText: mobx.IObservableValue<string> = mobx.observable.box("");
 
-    componentDidMount() {
+    /**
+     * Handles the OverlayScrollbars initialization event to set the scroll position without it being overridden.
+     */
+    @boundMethod
+    handleScrollbarInitialized() {
         const inputModel = GlobalModel.inputModel;
         let hitem = inputModel.getHistorySelectedItem();
         if (hitem == null) {
@@ -225,7 +229,7 @@ class HistoryInfo extends React.Component<{}, {}> {
     render() {
         const inputModel = GlobalModel.inputModel;
         const selItem = inputModel.getHistorySelectedItem();
-        const hitems = inputModel.getFilteredHistoryItems().slice().reverse();
+        const hitems = inputModel.getFilteredHistoryItems();
         const opts = inputModel.historyQueryOpts.get();
         let hitem: HistoryItem = null;
         let snames: Record<string, string> = {};
@@ -244,6 +248,7 @@ class HistoryInfo extends React.Component<{}, {}> {
                 titleBarContents={this.getTitleBarContents()}
                 iconClass="fa-sharp fa-solid fa-clock-rotate-left"
                 scrollable={true}
+                onScrollbarInitialized={this.handleScrollbarInitialized}
             >
                 <div
                     className={cn(

src/models/input.ts

@@ -151,7 +151,7 @@ class InputModel {
                     }
                     break;
                 }
-                case "aichat":
+                case appconst.InputAuxView_AIChat:
                     this.setAIChatFocus();
                     break;
                 case null: {
@@ -549,7 +549,6 @@ class InputModel {
 
         if (info != null && timeoutMs) {
             this.infoTimeoutId = setTimeout(() => {
-                console.log("clearing info msg");
                 if (this.activeAuxView.get() != appconst.InputAuxView_Info) {
                     return;
                 }