Ensure all AutoComplete popover are visible on screen (even if on the bottom of the window)

newIDE/app/src/Debugger/Inspectors/RuntimeSceneInspector.js

@@ -10,6 +10,7 @@ import { Line } from '../../UI/Grid';
 import mapValues from 'lodash/mapValues';
 import AutoComplete from 'material-ui/AutoComplete';
 import RaisedButton from 'material-ui/RaisedButton';
+import { defaultAutocompleteProps } from '../../UI/AutocompleteProps';
 
 type Props = {|
   runtimeScene: GameData,
@@ -127,11 +128,8 @@ export default class RuntimeSceneInspector extends React.Component<
           runtimeScene._objects.items && (
             <Line noMargin alignItems="baseline">
               <AutoComplete
+                {...defaultAutocompleteProps}
                 hintText="Enter the name of the object"
-                fullWidth
-                menuProps={{
-                  maxHeight: 250,
-                }}
                 searchText={this.state.newObjectName}
                 onUpdateInput={value => {
                   this.setState({

newIDE/app/src/EventsSheet/InstructionEditor/ParameterFields/BehaviorField.js

@@ -1,13 +1,8 @@
 import React, { Component } from 'react';
 import AutoComplete from 'material-ui/AutoComplete';
+import { defaultAutocompleteProps } from '../../../UI/AutocompleteProps';
 const gd = global.gd;
 
-const styles = {
-  autoCompleteTextField: {
-    minWidth: 300,
-  },
-};
-
 const fuzzyFilterOrEmpty = (searchText, key) => {
   return !key || AutoComplete.fuzzyFilter(searchText, key);
 };
@@ -104,12 +99,8 @@ export default class BehaviorField extends Component {
 
     return (
       <AutoComplete
+        {...defaultAutocompleteProps}
         floatingLabelText={this._description}
-        fullWidth
-        textFieldStyle={styles.autoCompleteTextField}
-        menuProps={{
-          maxHeight: 250,
-        }}
         errorText={
           !this._behaviorNames.length
             ? noBehaviorErrorText

newIDE/app/src/EventsSheet/InstructionEditor/ParameterFields/ExternalEventsField.js

@@ -7,12 +7,7 @@ import {
   enumerateExternalEvents,
 } from '../../../ProjectManager/EnumerateProjectItems';
 import { type ParameterFieldProps } from './ParameterFieldProps.flow';
-
+import { defaultAutocompleteProps } from '../../../UI/AutocompleteProps';
-const styles = {
-  autoCompleteTextField: {
-    minWidth: 300,
-  },
-};
 
 const fuzzyFilterOrEmpty = (searchText, key) => {
   return !key || AutoComplete.fuzzyFilter(searchText, key);
@@ -79,13 +74,9 @@ export default class ExternalEventsField extends Component<
   render() {
     return (
       <AutoComplete
+        {...defaultAutocompleteProps}
         floatingLabelText={this._description}
-        fullWidth
         id="external-events-field"
-        textFieldStyle={styles.autoCompleteTextField}
-        menuProps={{
-          maxHeight: 250,
-        }}
         searchText={this.state.focused ? this.state.text : this.props.value}
         onFocus={() => {
           this.setState({

newIDE/app/src/EventsSheet/InstructionEditor/ParameterFields/KeyField.js

@@ -2,12 +2,7 @@
 import React, { Component } from 'react';
 import AutoComplete from 'material-ui/AutoComplete';
 import { type ParameterFieldProps } from './ParameterFieldProps.flow';
-
+import { defaultAutocompleteProps } from '../../../UI/AutocompleteProps';
-const styles = {
-  autoCompleteTextField: {
-    minWidth: 300,
-  },
-};
 
 const fuzzyFilterOrEmpty = (searchText, key) => {
   return !key || AutoComplete.fuzzyFilter(searchText, key);
@@ -131,12 +126,8 @@ export default class KeyField extends Component<ParameterFieldProps, State> {
   render() {
     return (
       <AutoComplete
+        {...defaultAutocompleteProps}
         floatingLabelText={this._description}
-        fullWidth
-        textFieldStyle={styles.autoCompleteTextField}
-        menuProps={{
-          maxHeight: 250,
-        }}
         searchText={this.state.focused ? this.state.text : this.props.value}
         onFocus={() => {
           this.setState({

newIDE/app/src/EventsSheet/InstructionEditor/ParameterFields/LayerField.js

@@ -3,12 +3,7 @@ import React, { Component } from 'react';
 import AutoComplete from 'material-ui/AutoComplete';
 import { mapFor } from '../../../Utils/MapFor';
 import { type ParameterFieldProps } from './ParameterFieldProps.flow';
-
+import { defaultAutocompleteProps } from '../../../UI/AutocompleteProps';
-const styles = {
-  autoCompleteTextField: {
-    minWidth: 300,
-  },
-};
 
 const fuzzyFilterOrEmpty = (searchText, key) => {
   return !key || AutoComplete.fuzzyFilter(searchText, key);
@@ -63,12 +58,8 @@ export default class LayerField extends Component<ParameterFieldProps, State> {
   render() {
     return (
       <AutoComplete
+        {...defaultAutocompleteProps}
         floatingLabelText={this._description}
-        fullWidth
-        textFieldStyle={styles.autoCompleteTextField}
-        menuProps={{
-          maxHeight: 250,
-        }}
         searchText={this.state.focused ? this.state.text : this.props.value}
         onFocus={() => {
           this.setState({

newIDE/app/src/EventsSheet/InstructionEditor/ParameterFields/VariableField.js

@@ -4,6 +4,7 @@ import AutoComplete from 'material-ui/AutoComplete';
 import RaisedButton from 'material-ui/RaisedButton';
 import { enumerateVariables } from './EnumerateVariables';
 import { type ParameterFieldProps } from './ParameterFieldProps.flow';
+import { defaultAutocompleteProps } from '../../../UI/AutocompleteProps';
 
 const styles = {
   container: {
@@ -13,9 +14,6 @@ const styles = {
   moreButton: {
     marginLeft: 10,
   },
-  autoCompleteTextField: {
-    minWidth: 300,
-  },
 };
 
 const fuzzyFilterOrEmpty = (searchText, key) => {
@@ -72,12 +70,8 @@ export default class VariableField extends Component<Props, State> {
     return (
       <div style={styles.container}>
         <AutoComplete
+          {...defaultAutocompleteProps}
           floatingLabelText={this._description}
-          fullWidth
-          textFieldStyle={styles.autoCompleteTextField}
-          menuProps={{
-            maxHeight: 250,
-          }}
           searchText={this.state.focused ? this.state.text : this.props.value}
           onFocus={() => {
             this.setState({

newIDE/app/src/ObjectsList/ObjectSelector.js

@@ -3,16 +3,7 @@ import AutoComplete from 'material-ui/AutoComplete';
 import Divider from 'material-ui/Divider';
 import { enumerateObjectsAndGroups } from './EnumerateObjects';
 import { fuzzyOrEmptyFilter } from '../Utils/FuzzyOrEmptyFilter';
-
+import { defaultAutocompleteProps } from '../UI/AutocompleteProps';
-const styles = {
-  autoCompleteTextField: {
-    minWidth: 300,
-  },
-};
-
-const popoverProps = {
-  canAutoPosition: true,
-};
 
 export default class ObjectSelector extends Component {
   state = {
@@ -79,11 +70,7 @@ export default class ObjectSelector extends Component {
 
     return (
       <AutoComplete
-        fullWidth
+        {...defaultAutocompleteProps}
-        textFieldStyle={styles.autoCompleteTextField}
-        menuProps={{
-          maxHeight: 250,
-        }}
         searchText={this.state.focused ? this.state.text : value}
         onFocus={() => {
           this.setState({
@@ -116,7 +103,6 @@ export default class ObjectSelector extends Component {
         dataSource={this.fullList}
         filter={fuzzyOrEmptyFilter}
         ref={field => (this._field = field)}
-        popoverProps={popoverProps}
         {...rest}
       />
     );

newIDE/app/src/ResourcesList/ResourceSelector.js

@@ -10,6 +10,7 @@ import {
   type ChooseResourceFunction,
   type ResourceKind,
 } from '../ResourcesList/ResourceSource.flow';
+import { defaultAutocompleteProps } from '../UI/AutocompleteProps';
 
 type Props = {|
   project: gdProject,
@@ -152,6 +153,7 @@ export default class ResourceSelector extends React.Component<Props, State> {
 
     return (
       <AutoComplete
+        {...defaultAutocompleteProps}
         floatingLabelText={this.props.floatingLabelText || 'Select an image'}
         filter={fuzzyOrEmptyFilter}
         openOnFocus
@@ -162,9 +164,6 @@ export default class ResourceSelector extends React.Component<Props, State> {
         searchText={this.state.resourceName}
         fullWidth={this.props.fullWidth}
         style={styles.autoComplete}
-        menuProps={{
-          maxHeight: 250,
-        }}
       />
     );
   }

newIDE/app/src/UI/AutocompleteProps.js

@@ -0,0 +1,19 @@
+// @flow
+
+/**
+ * Provides props for material-ui AutoComplete components that specify
+ * sensible defaults for size and popover size/positioning.
+ */
+export const defaultAutocompleteProps = {
+  fullWidth: true,
+  textFieldStyle: {
+    minWidth: 300,
+  },
+  menuProps: {
+    maxHeight: 250, //TODO: try put it in PopoverProps
+  },
+  popoverProps: {
+    // Ensure that the Popover menu is always visible on screen
+    canAutoPosition: true,
+  },
+};