append suggestions dropdown in body (#149)

Christopher Tempel · jukben · commit bb28cae7abaf · 2019-05-01T11:19:41.000+02:00
* append suggestions dropdown in body see #128 #128 * add property renderToBody * fix lint and flow errors * fix positioning += instead of =+ * new prop renderToBody adding documentation for the new prop "renderToBody"
diff --git a/README.md b/README.md
@@ -53,6 +53,7 @@ or there is UMD build available. [Check out this pen as example](https://codepen
 | movePopupAsYouType     | boolean                                                               | When it's true the textarea will move along with a caret as a user continues to type. Defaults to false.                                                                         |
 | boundariesElement      | string \| HTMLElement                                                 | Element which should prevent autocomplete to overflow. Defaults to _body_.                                                                                                       |
 | textAreaComponent      | React.Component \| {component: React.Component, ref: string}          | What component use for as textarea. Default is `textarea`. (You can combine this with [react-autosize-textarea](https://github.com/buildo/react-autosize-textarea) for instance) |
+| renderToBody      | boolean | When set to `true` the autocomplete will be rendered at the end of the `<body>`. Default is `false`. |
 | style                  | Style Object                                                          | Style's of textarea                                                                                                                                                              |
 | listStyle              | Style Object                                                          | Styles of list's wrapper                                                                                                                                                         |
 | itemStyle              | Style Object                                                          | Styles of item's wrapper                                                                                                                                                         |
diff --git a/example/App.jsx b/example/App.jsx
@@ -31,7 +31,8 @@ class App extends React.Component {
     minChar: 0,
     optionsCaret: "start",
     actualTokenInProvider: "",
-    showSecondTextarea: false
+    showSecondTextarea: false,
+    renderToBody: false
   };
 
   _handleOptionsCaretEnd = () => {
@@ -64,6 +65,12 @@ class App extends React.Component {
     }));
   };
 
+  _handleRenderToBody = () => {
+    this.setState(({ renderToBody }) => ({
+      renderToBody: !renderToBody
+    }));
+  };
+
   _onChangeHandle = ({ target: { value } }) => {
     this.setState({
       text: value
@@ -130,7 +137,8 @@ class App extends React.Component {
       actualTokenInProvider,
       showSecondTextarea,
       text,
-      minChar
+      minChar,
+      renderToBody
     } = this.state;
 
     return (
@@ -188,6 +196,17 @@ class App extends React.Component {
             Move popup as you type
           </label>
         </div>
+        <div>
+          <label>
+            <input
+              data-test="renderToBody"
+              type="checkbox"
+              defaultChecked={renderToBody}
+              onChange={this._handleRenderToBody}
+            />
+            Render autocomplete to body
+          </label>
+        </div>
         <div>
           <label>
             <input
@@ -255,6 +274,7 @@ class App extends React.Component {
           minChar={minChar}
           value={text}
           onChange={this._onChangeHandle}
+          renderToBody={renderToBody}
           trigger={{
             ":": {
               dataProvider: token =>
diff --git a/package.json b/package.json
@@ -82,7 +82,8 @@
   },
   "peerDependencies": {
     "prop-types": "^15.0.0",
-    "react": "^16.0.0"
+    "react": "^16.0.0",
+    "react-dom": "16.6.0"
   },
   "dependencies": {
     "custom-event": "^1.0.1",
diff --git a/src/Textarea.jsx b/src/Textarea.jsx
@@ -2,6 +2,7 @@
 /* eslint react/no-multi-comp: 0 */
 
 import React from "react";
+import ReactDOM from 'react-dom'
 import PropTypes from "prop-types";
 import getCaretCoordinates from "textarea-caret";
 import CustomEvent from "custom-event";
@@ -49,7 +50,8 @@ type AutocompleteProps = {
   top: ?number,
   left: ?number,
   children: *,
-  textareaRef: HTMLElement
+  textareaRef: HTMLElement,
+  renderToBody: ?boolean
 };
 
 class Autocomplete extends React.Component<AutocompleteProps> {
@@ -149,6 +151,11 @@ class Autocomplete extends React.Component<AutocompleteProps> {
       unusedClasses.push(POSITION_CONFIGURATION.Y.TOP);
     }
 
+    if(this.props.renderToBody) {
+      topPosition += textareaBounds.top;
+      leftPosition += textareaBounds.left;
+    }
+
     this.ref.style.top = `${topPosition}px`;
     this.ref.style.left = `${leftPosition}px`;
 
@@ -157,9 +164,9 @@ class Autocomplete extends React.Component<AutocompleteProps> {
   }
 
   render() {
-    const { style, className, innerRef, children } = this.props;
-
-    return (
+    const { style, className, innerRef, children, renderToBody } = this.props;
+    const body = document.body;
+    const autocompleteContainer = (
       <div
         ref={ref => {
           // $FlowFixMe
@@ -173,6 +180,8 @@ class Autocomplete extends React.Component<AutocompleteProps> {
         {children}
       </div>
     );
+
+    return renderToBody && body !== null ? ReactDOM.createPortal(autocompleteContainer, body) : autocompleteContainer;
   }
 }
 
@@ -186,7 +195,8 @@ class ReactTextareaAutocomplete extends React.Component<
     minChar: 1,
     boundariesElement: "body",
     scrollToItem: true,
-    textAreaComponent: "textarea"
+    textAreaComponent: "textarea",
+    renderToBody: false
   };
 
   constructor(props: TextareaProps) {
@@ -645,7 +655,8 @@ class ReactTextareaAutocomplete extends React.Component<
       "dropdownStyle",
       "dropdownClassName",
       "movePopupAsYouType",
-      "textAreaComponent"
+      "textAreaComponent",
+      "renderToBody"
     ];
 
     // eslint-disable-next-line
@@ -937,7 +948,8 @@ class ReactTextareaAutocomplete extends React.Component<
       containerClassName,
       loaderStyle,
       loaderClassName,
-      textAreaComponent
+      textAreaComponent,
+      renderToBody
     } = this.props;
     const {
       left,
@@ -995,6 +1007,7 @@ class ReactTextareaAutocomplete extends React.Component<
             movePopupAsYouType={movePopupAsYouType}
             boundariesElement={boundariesElement}
             textareaRef={this.textareaRef}
+            renderToBody={renderToBody}
           >
             {suggestionData && component && textToReplace && (
               <List
@@ -1113,7 +1126,8 @@ ReactTextareaAutocomplete.propTypes = {
   loaderClassName: PropTypes.string,
   dropdownClassName: PropTypes.string,
   boundariesElement: containerPropCheck, //eslint-disable-line
-  trigger: triggerPropsCheck //eslint-disable-line
+  trigger: triggerPropsCheck, //eslint-disable-line
+  renderToBody: PropTypes.bool
 };
 
 export default ReactTextareaAutocomplete;
diff --git a/src/types.js b/src/types.js
@@ -93,7 +93,8 @@ export type TextareaProps = {
   listClassName: ?string,
   itemClassName: ?string,
   loaderClassName: ?string,
-  dropdownClassName: ?string
+  dropdownClassName: ?string,
+  renderToBody: ?boolean
 };
 
 export type TextareaState = {
