Merge pull request #2914 from tiagoschenkel/improve-autocomplete-arra…

…y-input Limit autocomplete height on AutocompleteArrayInput
marmelab · Feb 26, 2019 · f8683ff · f8683ff
2 parents 0062aa9 + 9aaf7d3
commit f8683ff
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/packages/ra-data-json-server/src/index.js b/packages/ra-data-json-server/src/index.js
@@ -81,7 +81,7 @@ export default (apiUrl, httpClient = fetchUtils.fetchJson) => {
                 break;
             case GET_MANY: {
                 const query = {
-                  id: params.ids
+                    id: params.ids,
                 };
                 url = `${apiUrl}/${resource}?${stringify(query)}`;
                 break;

diff --git a/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.js b/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.js
@@ -29,6 +29,10 @@ const styles = theme => ({
         marginBottom: theme.spacing.unit * 3,
         zIndex: 2,
     },
+    suggestionsPaper: {
+        maxHeight: '50vh',
+        overflowY: 'auto',
+    },
     suggestion: {
         display: 'block',
         fontFamily: theme.typography.fontFamily,
@@ -357,23 +361,28 @@ export class AutocompleteArrayInput extends React.Component {
         }
     }
 
-    renderSuggestionsContainer = options => {
+    renderSuggestionsContainer = autosuggestOptions => {
         const {
             containerProps: { className, ...containerProps },
             children,
-        } = options;
+        } = autosuggestOptions;
+        const { classes = {} } = this.props;
 
         // Force the Popper component to reposition the popup only when this.inputEl is moved to another location
         this.updateAnchorEl();
 
         return (
             <Popper
                 className={className}
-                open
+                open={Boolean(children)}
                 anchorEl={this.anchorEl}
                 placement="bottom-start"
             >
-                <Paper square {...containerProps}>
+                <Paper
+                    square
+                    className={classes.suggestionsPaper}
+                    {...containerProps}
+                >
                     {children}
                 </Paper>
             </Popper>