Restore expand animation on autocomplete suggestions

components/autocomplete/Autocomplete.js

@@ -10,6 +10,8 @@ import InjectChip from '../chip/Chip.js';
 import InjectInput from '../input/Input.js';
 import events from '../utils/events.js';
 import Portal from '../hoc/Portal';
+import TransitionGroup from 'react-transition-group/TransitionGroup';
+import Transition from 'react-transition-group/Transition';
 
 const POSITION = {
   AUTO: 'auto',
@@ -190,6 +192,7 @@ const factory = (Chip, Input) => {
       if (maxHeight > screen_height*0.45) {
         maxHeight = Math.floor(screen_height*0.45);
       }
+      maxHeight = maxHeight+'px';
       if (this.state.top !== top || this.state.left !== left ||
         this.state.width !== width || this.state.bottom !== bottom ||
         this.state.maxHeight !== maxHeight) {
@@ -378,7 +381,7 @@ const factory = (Chip, Input) => {
 
     renderSuggestions() {
       const { theme } = this.props;
-      const suggestions = [...this.suggestions()].map(([key, value]) => {
+      return [...this.suggestions()].map(([key, value]) => {
         const className = classnames(theme.suggestion, { [theme.active]: this.state.active === key });
         return (
           <li
@@ -392,14 +395,22 @@ const factory = (Chip, Input) => {
           </li>
         );
       });
+    }
 
+    renderSuggestionList() {
+      const { theme } = this.props;
       const { top, bottom, maxHeight, left, width } = this.state;
-      return (<div style={{position: 'absolute', top, left, width}}>
+      return (<TransitionGroup style={{position: 'absolute', top, left, width}}>
-        <ul style={{bottom, maxHeight}}
+        <Transition
-          className={theme.suggestions}>
+          appear={true}
-          {suggestions}
+          timeout={0}
-        </ul>
+          onEntered={(node, appearing) => { node.style.maxHeight = maxHeight; }}>
-      </div>);
+          <ul style={{bottom}}
+            className={theme.suggestions}>
+            {this.renderSuggestions()}
+          </ul>
+        </Transition>
+      </TransitionGroup>);
     }
 
     render() {
@@ -436,7 +447,7 @@ const factory = (Chip, Input) => {
             value={this.state.query}
           />
           <Portal>
-            {this.state.focus ? this.renderSuggestions() : null}
+            {this.state.focus ? this.renderSuggestionList() : null}
           </Portal>
           {this.props.selectedPosition === 'below' ? this.renderSelected() : null}
         </div>

components/autocomplete/theme.css

@@ -40,7 +40,7 @@
   position: absolute;
   background-color: var(--autocomplete-suggestions-background);
   list-style: none;
-  max-height: 0;
+  max-height: 1px;
   overflow-x: hidden;
   overflow-y: auto;
   padding: 0;
@@ -50,7 +50,6 @@
   width: 100%;
   z-index: var(--z-index-highest);
   box-shadow: var(--zdepth-shadow-1);
-  max-height: var(--autocomplete-overflow-max-height);
   -ms-overflow-style: none;
 
   &::-webkit-scrollbar {