feat: implement scroll to view in rightsidebar for legacy application…

… path on edit

src/renderer/components/DropdownInputField.tsx

@@ -16,6 +16,8 @@ export type DropdownInputFieldProps = InputFieldProps & {
   onItemSelect?: (text: string, index: number) => void;
   /** Function for getting a reference to the input element. Called whenever the reference could change. */
   inputRef?: RefFunc<InputElement>;
+  /** Called when the drop-down content is expanded or collapsed. */
+  onExpand?: (expanded: boolean) => void;
 };
 
 type DropdownInputFieldState = {
@@ -204,7 +206,12 @@ export class DropdownInputField extends React.Component<DropdownInputFieldProps,
 
   onExpandButtonMouseDown = (): void => {
     if (!this.props.disabled) {
-      this.setState({ expanded: !this.state.expanded });
+      const newExpandedState = !this.state.expanded;
+      this.setState({ expanded: newExpandedState }, () => {
+        if (this.props.onExpand) {
+          this.props.onExpand(newExpandedState);
+        }
+      });
     }
   };
 

src/renderer/components/RightBrowseSidebar.tsx

@@ -852,6 +852,7 @@ export class RightBrowseSidebar extends React.Component<RightBrowseSidebarProps,
                     text={game.legacyApplicationPath}
                     placeholder={strings.noApplicationPath}
                     onChange={this.onApplicationPathChange}
+                    onExpand={this.onApplicationPathExpand}
                     editable={editable}
                     items={suggestions && filterSuggestions(suggestions.applicationPath) || []}
                     onItemSelect={text => this.props.onEditGame({ legacyApplicationPath: text })} />
@@ -969,6 +970,15 @@ export class RightBrowseSidebar extends React.Component<RightBrowseSidebarProps,
     }
   }
 
+  onApplicationPathExpand = () => {
+    if (this.state.middleScrollRef.current) {
+      this.state.middleScrollRef.current.scrollTo({
+        top: this.state.middleScrollRef.current.scrollHeight,
+        behavior: 'smooth'
+      });
+    }
+  }
+
   renderDeleteGameButton({ confirm, extra }: ConfirmElementArgs<LangContainer['browse']>): JSX.Element {
     return (
       <div