Fix conditional suggestions rendering

0xhyperdust · Feb 23, 2019 · b6fee3b · b6fee3b
1 parent acc5b56
commit b6fee3b
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-ts-timepicker",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Simple timepicker for React",
   "main": "dist/index.js",
   "scripts": {

diff --git a/src/TimePicker.tsx b/src/TimePicker.tsx
@@ -563,7 +563,11 @@ class TimePicker extends React.Component<IProps, IState> {
             value,
         } = this.state;
 
-        return (
+        const {
+            appendTo,
+        } = this.props;
+
+        const markup = (
             <div
                 className="time-picker__suggestion-list"
                 ref={(el) => { this.suggestionsWrapperEl = el; }}
@@ -596,12 +600,21 @@ class TimePicker extends React.Component<IProps, IState> {
                     </button>
                 ))}
             </div>
+        )
+
+        if (appendTo === null) {
+            return markup;
+        }
+
+        return (
+            <Portal node={appendTo !== "body" && document && document.querySelector(appendTo)}>
+                {markup}
+            </Portal>
         );
     }
 
     render() {
         const {
-            appendTo,
             className,
             inputClass,
         } = this.props;
@@ -623,12 +636,7 @@ class TimePicker extends React.Component<IProps, IState> {
                     ref={(el) => { this.inputEl = el; }}
                 />
                 {((showSuggestions && suggestions.length > 0) || this.suggestionsWrapperEl) &&
-                    appendTo === null ?
-                        this.renderSuggestions() : (
-                            <Portal node={appendTo !== "body" && document && document.querySelector(appendTo)}>
-                                {this.renderSuggestions()}
-                            </Portal>
-                        )
+                    this.renderSuggestions()
                 }
             </div>
         );