Add expand animation

Picker.js

@@ -31,11 +31,14 @@ export class Picker extends React.Component
 
     focus = () =>
     {
-        this.setState({ focused: true, height: 0 });
-        this.calculateDirection();
-        if (this.props.clearOnClick)
+        if (!this.state.focused)
         {
-            document.body.addEventListener('click', this.blurExt);
+            this.setState({ focused: true, height: 0 });
+            this.calculateDirection();
+            if (this.props.clearOnClick)
+            {
+                document.body.addEventListener('click', this.blurExt);
+            }
         }
     }
 
@@ -87,9 +90,10 @@ export class Picker extends React.Component
                 ? <div style={{
                     position: 'fixed',
                     background: 'white',
-                    top: this.state.top,
-                    width: this.state.width||'auto',
-                    left: this.state.left,
+                    height: this.state.height ? this.state.height+'px' : 'auto',
+                    top: this.state.top+'px',
+                    width: this.state.width ? this.state.width+'px' : 'auto',
+                    left: this.state.left+'px',
                     zIndex: 100,
                 }} ref={this.setPicker}>
                     {this.props.renderPicker()}
@@ -124,15 +128,17 @@ export class Picker extends React.Component
         let top = client.top
             + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop)
             - (document.documentElement.clientTop || document.body.clientTop || 0);
-        top = direction == 'down' ? (top + client.height) + 'px' : (top - picker_height) + 'px';
+        const max_height = (direction == 'down' ? screen_height-top-client.height-32 : top-32);
+        const height = picker_height < max_height ? picker_height : max_height;
+        top = direction == 'down' ? (top + client.height) : (top - height);
         const left = (client.left
             + (window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft)
-            - (document.documentElement.clientLeft || document.body.clientLeft || 0)) + 'px';
-        const width = (this.props.minWidth && client.width < this.props.minWidth ? this.props.minWidth : client.width)+'px';
+            - (document.documentElement.clientLeft || document.body.clientLeft || 0));
+        const width = (this.props.minWidth && client.width < this.props.minWidth ? this.props.minWidth : client.width);
         if (this.state.top !== top || this.state.left !== left ||
-            this.state.width !== width || this.state.height !== picker_height)
+            this.state.width !== width || this.state.height !== height)
         {
-            this.setState({ top, left, width, height: picker_height });
+            this.setState({ top, left, width, height });
         }
     }
 }

Selectbox.js

@@ -51,6 +51,7 @@ export default class Selectbox extends React.PureComponent
     }
 
     state = {
+        shown: false,
         active: null,
         query: null,
         inputWidth: 20,
@@ -238,10 +239,33 @@ export default class Selectbox extends React.PureComponent
         </div>);
     }
 
+    animateSuggestions = (e) =>
+    {
+        if (e)
+        {
+            e.style.visibility = 'hidden';
+            e.style.overflowY = 'hidden';
+            const anim = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame;
+            anim(() =>
+            {
+                e.style.visibility = '';
+                e.style.maxHeight = '1px';
+                anim(() =>
+                {
+                    e.style.maxHeight = '100%';
+                    const end = () => { e.style.overflowY = 'auto'; e.removeEventListener('transitionend', end); };
+                    e.addEventListener('transitionend', end);
+                });
+            });
+        }
+    }
+
     renderSuggestions = () =>
     {
-        return (<div className={autocomplete_css.suggestions} onMouseDown={this.onMouseDown} onMouseOver={this.onMouseOver}>
-            {this.filtered_items.map((e, i) => (<div key={i} id={i}
+        return (<div ref={this.animateSuggestions}
+            className={autocomplete_css.suggestions}
+            onMouseOver={this.onMouseOver}>
+            {this.filtered_items.map((e, i) => (<div key={i} id={i} onMouseDown={this.onMouseDown}
                 className={autocomplete_css.suggestion+(this.state.active == i ? ' '+autocomplete_css.active : '')}>
                 {e[this.props.labelKey||'name']}
             </div>))}

autocomplete.css

@@ -48,7 +48,7 @@
     overflow-x: hidden;
     overflow-y: auto;
     padding: 0;
-    transition-duration: 0.35s;
+    transition-duration: 0.2s;
     transition-property: max-height;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     width: 100%;