react-mentions 4.3.0 → 4.4.0

package/README.md

@@ -7,7 +7,7 @@
 
 A React component that let's you mention people in a textarea like you are used to on Facebook or Twitter.
 
-Used in production at [Signavio](https://signavio.com), [State](https://state.com), [Snips](https://snips.ai), [Swat.io](https://swat.io), [GotDone](https://www.gotdone.me), [Volinspire](https://volinspire.com), [Marvin](https://amazingmarvin.com), [Timely](https://timelyapp.com), [GuideFitter](https://www.guidefitter.com/), [Evite](https://www.evite.com/), [Publer](https://publer.me/), [Kontentino](https://www.kontentino.com/), and [you?](https://github.com/signavio/react-mentions/edit/master/README.md)
+Used in production at [Signavio](https://signavio.com), [State](https://state.com), [Snips](https://snips.ai), [Swat.io](https://swat.io), [GotDone](https://www.gotdone.me), [Volinspire](https://volinspire.com), [Marvin](https://amazingmarvin.com), [Timely](https://timelyapp.com), [GuideFitter](https://www.guidefitter.com/), [Evite](https://www.evite.com/), [Publer](https://publer.me/), [Kontentino](https://www.kontentino.com/), [Wix.com](https://wix.com), [Highlight](https://highlight.run/) and [you?](https://github.com/signavio/react-mentions/edit/master/README.md)
 
 ## Getting started
 
@@ -65,6 +65,7 @@ The `MentionsInput` supports the following props for configuring the widget:
 | inputRef                    | React ref                                               | undefined      | Accepts a React ref to forward to the underlying input element                         |
 | allowSuggestionsAboveCursor | boolean                                                 | false          | Renders the SuggestionList above the cursor if there is not enough space below         |
 | a11ySuggestionsListLabel    | string                                                  | `''`           | This label would be exposed to screen readers when suggestion popup appears            |
+| customSuggestionsContainer    | function(children)                                                  | empty function | Allows customizing the container of the suggestions            |
 
 Each data source is configured using a `Mention` component, which has the following props:
 

package/dist/react-mentions.cjs.dev.js

@@ -8,10 +8,10 @@ var _toConsumableArray = _interopDefault(require('@babel/runtime/helpers/toConsu
 var _extends = _interopDefault(require('@babel/runtime/helpers/extends'));
 var _classCallCheck = _interopDefault(require('@babel/runtime/helpers/classCallCheck'));
 var _createClass = _interopDefault(require('@babel/runtime/helpers/createClass'));
-var _possibleConstructorReturn = _interopDefault(require('@babel/runtime/helpers/possibleConstructorReturn'));
-var _getPrototypeOf = _interopDefault(require('@babel/runtime/helpers/getPrototypeOf'));
 var _assertThisInitialized = _interopDefault(require('@babel/runtime/helpers/assertThisInitialized'));
 var _inherits = _interopDefault(require('@babel/runtime/helpers/inherits'));
+var _possibleConstructorReturn = _interopDefault(require('@babel/runtime/helpers/possibleConstructorReturn'));
+var _getPrototypeOf = _interopDefault(require('@babel/runtime/helpers/getPrototypeOf'));
 var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty'));
 var React = require('react');
 var React__default = _interopDefault(React);
@@ -629,6 +629,10 @@ var getSubstringIndex = function getSubstringIndex(str, substr, ignoreAccents) {
   return normalizeString(str).indexOf(normalizeString(substr));
 };
 
+var isIE = function isIE() {
+  return !!document.documentMode;
+};
+
 var isNumber = function isNumber(val) {
   return typeof val === 'number';
 };
@@ -655,13 +659,15 @@ var omit = function omit(obj) {
   }, {});
 };
 
+var _excluded = ["style", "className", "classNames"];
+
 function createDefaultStyle(defaultStyle, getModifiers) {
   var enhance = function enhance(ComponentToWrap) {
     var DefaultStyleEnhancer = function DefaultStyleEnhancer(_ref) {
       var style = _ref.style,
           className = _ref.className,
           classNames = _ref.classNames,
-          rest = _objectWithoutProperties(_ref, ["style", "className", "classNames"]);
+          rest = _objectWithoutProperties(_ref, _excluded);
 
       var modifiers = getModifiers ? getModifiers(rest) : undefined;
       var styles = useStyles__default(defaultStyle, {
@@ -669,7 +675,7 @@ function createDefaultStyle(defaultStyle, getModifiers) {
         className: className,
         classNames: classNames
       }, modifiers);
-      return React__default.createElement(ComponentToWrap, _extends({}, rest, {
+      return /*#__PURE__*/React__default.createElement(ComponentToWrap, _extends({}, rest, {
         style: styles
       }));
     };
@@ -682,6 +688,10 @@ function createDefaultStyle(defaultStyle, getModifiers) {
   return enhance;
 }
 
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
 var _generateComponentKey = function _generateComponentKey(usedKeys, id) {
   if (!usedKeys.hasOwnProperty(id)) {
     usedKeys[id] = 0;
@@ -692,17 +702,17 @@ var _generateComponentKey = function _generateComponentKey(usedKeys, id) {
   return id + '_' + usedKeys[id];
 };
 
-var Highlighter =
-/*#__PURE__*/
-function (_Component) {
+var Highlighter = /*#__PURE__*/function (_Component) {
   _inherits(Highlighter, _Component);
 
+  var _super = _createSuper(Highlighter);
+
   function Highlighter() {
     var _this;
 
     _classCallCheck(this, Highlighter);
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(Highlighter).apply(this, arguments));
+    _this = _super.apply(this, arguments);
 
     _defineProperty(_assertThisInitialized(_this), "setCaretElement", function (el) {
       _this.caretElement = el;
@@ -805,7 +815,7 @@ function (_Component) {
         resultComponents.push(this.renderHighlighterCaret(components));
       }
 
-      return React__default.createElement("div", _extends({}, style, {
+      return /*#__PURE__*/React__default.createElement("div", _extends({}, style, {
         ref: containerRef
       }), resultComponents);
     }
@@ -813,7 +823,7 @@ function (_Component) {
     key: "renderSubstring",
     value: function renderSubstring(string, key) {
       // set substring span to hidden, so that Emojis are not shown double in Mobile Safari
-      return React__default.createElement("span", _extends({}, this.props.style('substring'), {
+      return /*#__PURE__*/React__default.createElement("span", _extends({}, this.props.style('substring'), {
         key: key
       }), string);
     } // Returns a clone of the Mention child applicable for the specified type to be rendered inside the highlighter
@@ -827,13 +837,13 @@ function (_Component) {
         key: key
       };
       var child = React.Children.toArray(this.props.children)[mentionChildIndex];
-      return React__default.cloneElement(child, props);
+      return /*#__PURE__*/React__default.cloneElement(child, props);
     } // Renders an component to be inserted in the highlighter at the current caret position
 
   }, {
     key: "renderHighlighterCaret",
     value: function renderHighlighterCaret(children) {
-      return React__default.createElement("span", _extends({}, this.props.style('caret'), {
+      return /*#__PURE__*/React__default.createElement("span", _extends({}, this.props.style('caret'), {
         ref: this.setCaretElement,
         key: "caret"
       }), children);
@@ -882,15 +892,19 @@ var styled = createDefaultStyle({
 });
 var Highlighter$1 = styled(Highlighter);
 
-var Suggestion =
-/*#__PURE__*/
-function (_Component) {
+function _createSuper$1(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct$1() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var Suggestion = /*#__PURE__*/function (_Component) {
   _inherits(Suggestion, _Component);
 
+  var _super = _createSuper$1(Suggestion);
+
   function Suggestion() {
     _classCallCheck(this, Suggestion);
 
-    return _possibleConstructorReturn(this, _getPrototypeOf(Suggestion).apply(this, arguments));
+    return _super.apply(this, arguments);
   }
 
   _createClass(Suggestion, [{
@@ -898,7 +912,7 @@ function (_Component) {
     value: function render() {
       var rest = omit(this.props, ['style', 'classNames', 'className'], // substyle props
       keys(Suggestion.propTypes));
-      return React__default.createElement("li", _extends({
+      return /*#__PURE__*/React__default.createElement("li", _extends({
         id: this.props.id,
         role: "option",
         "aria-selected": this.props.focused
@@ -950,10 +964,10 @@ function (_Component) {
       var i = getSubstringIndex(display, query, ignoreAccents);
 
       if (i === -1) {
-        return React__default.createElement("span", style('display'), display);
+        return /*#__PURE__*/React__default.createElement("span", style('display'), display);
       }
 
-      return React__default.createElement("span", style('display'), display.substring(0, i), React__default.createElement("b", style('highlight'), display.substring(i, i + query.length)), display.substring(i + query.length));
+      return /*#__PURE__*/React__default.createElement("span", style('display'), display.substring(0, i), /*#__PURE__*/React__default.createElement("b", style('highlight'), display.substring(i, i + query.length)), display.substring(i + query.length));
     }
   }]);
 
@@ -985,17 +999,19 @@ var Suggestion$1 = styled$1(Suggestion);
 function LoadingIndicator() {
   var styles = useStyles__default();
   var spinnerStyles = styles('spinner');
-  return React__default.createElement("div", styles, React__default.createElement("div", spinnerStyles, React__default.createElement("div", spinnerStyles(['element', 'element1'])), React__default.createElement("div", spinnerStyles(['element', 'element2'])), React__default.createElement("div", spinnerStyles(['element', 'element3'])), React__default.createElement("div", spinnerStyles(['element', 'element4'])), React__default.createElement("div", spinnerStyles(['element', 'element5']))));
+  return /*#__PURE__*/React__default.createElement("div", styles, /*#__PURE__*/React__default.createElement("div", spinnerStyles, /*#__PURE__*/React__default.createElement("div", spinnerStyles(['element', 'element1'])), /*#__PURE__*/React__default.createElement("div", spinnerStyles(['element', 'element2'])), /*#__PURE__*/React__default.createElement("div", spinnerStyles(['element', 'element3'])), /*#__PURE__*/React__default.createElement("div", spinnerStyles(['element', 'element4'])), /*#__PURE__*/React__default.createElement("div", spinnerStyles(['element', 'element5']))));
 }
 
-var SuggestionsOverlay =
-/*#__PURE__*/
-function (_Component) {
+function _createSuper$2(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct$2() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var SuggestionsOverlay = /*#__PURE__*/function (_Component) {
   _inherits(SuggestionsOverlay, _Component);
 
-  function SuggestionsOverlay() {
-    var _getPrototypeOf2;
+  var _super = _createSuper$2(SuggestionsOverlay);
 
+  function SuggestionsOverlay() {
     var _this;
 
     _classCallCheck(this, SuggestionsOverlay);
@@ -1004,7 +1020,7 @@ function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(SuggestionsOverlay)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    _this = _super.call.apply(_super, [this].concat(args));
 
     _defineProperty(_assertThisInitialized(_this), "handleMouseEnter", function (index, ev) {
       if (_this.props.onMouseEnter) {
@@ -1060,20 +1076,22 @@ function (_Component) {
           containerRef = _this$props.containerRef,
           position = _this$props.position,
           left = _this$props.left,
+          right = _this$props.right,
           top = _this$props.top; // do not show suggestions until there is some data
 
       if (!isOpened) {
         return null;
       }
 
-      return React__default.createElement("div", _extends({}, useStyles.inline({
+      return /*#__PURE__*/React__default.createElement("div", _extends({}, useStyles.inline({
         position: position || 'absolute',
         left: left,
+        right: right,
         top: top
       }, style), {
         onMouseDown: onMouseDown,
         ref: containerRef
-      }), React__default.createElement("ul", _extends({
+      }), /*#__PURE__*/React__default.createElement("ul", _extends({
         ref: this.setUlElement,
         id: id,
         role: "listbox",
@@ -1085,13 +1103,15 @@ function (_Component) {
     value: function renderSuggestions() {
       var _this2 = this;
 
-      return Object.values(this.props.suggestions).reduce(function (accResults, _ref) {
+      var customSuggestionsContainer = this.props.customSuggestionsContainer;
+      var suggestions = Object.values(this.props.suggestions).reduce(function (accResults, _ref) {
         var results = _ref.results,
             queryInfo = _ref.queryInfo;
         return [].concat(_toConsumableArray(accResults), _toConsumableArray(results.map(function (result, index) {
           return _this2.renderSuggestion(result, queryInfo, accResults.length + index);
         })));
       }, []);
+      if (customSuggestionsContainer) return customSuggestionsContainer(suggestions);else return suggestions;
     }
   }, {
     key: "renderSuggestion",
@@ -1103,7 +1123,7 @@ function (_Component) {
           query = queryInfo.query;
       var renderSuggestion = React.Children.toArray(this.props.children)[childIndex].props.renderSuggestion;
       var ignoreAccents = this.props.ignoreAccents;
-      return React__default.createElement(Suggestion$1, {
+      return /*#__PURE__*/React__default.createElement(Suggestion$1, {
         style: this.props.style('item'),
         key: "".concat(childIndex, "-").concat(getID(result)),
         id: getSuggestionHtmlId(this.props.id, index),
@@ -1128,7 +1148,7 @@ function (_Component) {
         return;
       }
 
-      return React__default.createElement(LoadingIndicator, {
+      return /*#__PURE__*/React__default.createElement(LoadingIndicator, {
         style: this.props.style('loadingIndicator')
       });
     }
@@ -1144,6 +1164,7 @@ _defineProperty(SuggestionsOverlay, "propTypes", {
   focusIndex: PropTypes.number,
   position: PropTypes.string,
   left: PropTypes.number,
+  right: PropTypes.number,
   top: PropTypes.number,
   scrollFocusedIntoView: PropTypes.bool,
   isLoading: PropTypes.bool,
@@ -1184,9 +1205,13 @@ var styled$2 = createDefaultStyle({
 });
 var SuggestionsOverlay$1 = styled$2(SuggestionsOverlay);
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _createSuper$3(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$3(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct$3() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var makeTriggerRegex = function makeTriggerRegex(trigger) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
@@ -1244,6 +1269,7 @@ var propTypes = {
   a11ySuggestionsListLabel: PropTypes.string,
   value: PropTypes.string,
   onKeyDown: PropTypes.func,
+  customSuggestionsContainer: PropTypes.func,
   onSelect: PropTypes.func,
   onBlur: PropTypes.func,
   onChange: PropTypes.func,
@@ -1254,17 +1280,17 @@ var propTypes = {
   children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired
 };
 
-var MentionsInput =
-/*#__PURE__*/
-function (_React$Component) {
+var MentionsInput = /*#__PURE__*/function (_React$Component) {
   _inherits(MentionsInput, _React$Component);
 
+  var _super = _createSuper$3(MentionsInput);
+
   function MentionsInput(_props) {
     var _this;
 
     _classCallCheck(this, MentionsInput);
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(MentionsInput).call(this, _props));
+    _this = _super.call(this, _props);
 
     _defineProperty(_assertThisInitialized(_this), "setContainerElement", function (el) {
       _this.containerElement = el;
@@ -1278,7 +1304,7 @@ function (_React$Component) {
 
       var props = omit(_this.props, ['style', 'classNames', 'className'], // substyle props
       keys(propTypes));
-      return _objectSpread({}, props, {}, style('input'), {
+      return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, props), style('input')), {}, {
         value: _this.getPlainText()
       }, !readOnly && !disabled && {
         onChange: _this.handleChange,
@@ -1288,7 +1314,7 @@ function (_React$Component) {
         onCompositionStart: _this.handleCompositionStart,
         onCompositionEnd: _this.handleCompositionEnd,
         onScroll: _this.updateHighlighterScroll
-      }, {}, _this.isOpened() && {
+      }), _this.isOpened() && {
         role: 'combobox',
         'aria-controls': _this.uuidSuggestionsOverlay,
         'aria-expanded': true,
@@ -1305,18 +1331,18 @@ function (_React$Component) {
 
       var inputProps = _this.getInputProps();
 
-      return React__default.createElement("div", style('control'), _this.renderHighlighter(), singleLine ? _this.renderInput(inputProps) : _this.renderTextarea(inputProps));
+      return /*#__PURE__*/React__default.createElement("div", style('control'), _this.renderHighlighter(), singleLine ? _this.renderInput(inputProps) : _this.renderTextarea(inputProps));
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderInput", function (props) {
-      return React__default.createElement("input", _extends({
+      return /*#__PURE__*/React__default.createElement("input", _extends({
         type: "text",
         ref: _this.setInputRef
       }, props));
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderTextarea", function (props) {
-      return React__default.createElement("textarea", _extends({
+      return /*#__PURE__*/React__default.createElement("textarea", _extends({
         ref: _this.setInputRef
       }, props));
     });
@@ -1345,17 +1371,20 @@ function (_React$Component) {
       var _this$state$suggestio = _this.state.suggestionsPosition,
           position = _this$state$suggestio.position,
           left = _this$state$suggestio.left,
-          top = _this$state$suggestio.top;
-      var suggestionsNode = React__default.createElement(SuggestionsOverlay$1, {
+          top = _this$state$suggestio.top,
+          right = _this$state$suggestio.right;
+      var suggestionsNode = /*#__PURE__*/React__default.createElement(SuggestionsOverlay$1, {
         id: _this.uuidSuggestionsOverlay,
         style: _this.props.style('suggestions'),
         position: position,
         left: left,
         top: top,
+        right: right,
         focusIndex: _this.state.focusIndex,
         scrollFocusedIntoView: _this.state.scrollFocusedIntoView,
         containerRef: _this.setSuggestionsElement,
         suggestions: _this.state.suggestions,
+        customSuggestionsContainer: _this.props.customSuggestionsContainer,
         onSelect: _this.addMention,
         onMouseDown: _this.handleSuggestionsMouseDown,
         onMouseEnter: _this.handleSuggestionsMouseEnter,
@@ -1366,7 +1395,7 @@ function (_React$Component) {
       }, _this.props.children);
 
       if (_this.props.suggestionsPortalHost) {
-        return ReactDOM.createPortal(suggestionsNode, _this.props.suggestionsPortalHost);
+        return /*#__PURE__*/ReactDOM.createPortal(suggestionsNode, _this.props.suggestionsPortalHost);
       } else {
         return suggestionsNode;
       }
@@ -1381,7 +1410,7 @@ function (_React$Component) {
           children = _this$props3.children,
           value = _this$props3.value,
           style = _this$props3.style;
-      return React__default.createElement(Highlighter$1, {
+      return /*#__PURE__*/React__default.createElement(Highlighter$1, {
         containerRef: _this.setHighlighterElement,
         style: style('highlighter'),
         value: value,
@@ -1425,13 +1454,16 @@ function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleChange", function (ev) {
-      isComposing = false; // if we are inside iframe, we need to find activeElement within its contentDocument
+      isComposing = false;
 
-      var currentDocument = document.activeElement && document.activeElement.contentDocument || document;
+      if (isIE()) {
+        // if we are inside iframe, we need to find activeElement within its contentDocument
+        var currentDocument = document.activeElement && document.activeElement.contentDocument || document;
 
-      if (currentDocument.activeElement !== ev.target) {
-        // fix an IE bug (blur from empty input element with placeholder attribute trigger "input" event)
-        return;
+        if (currentDocument.activeElement !== ev.target) {
+          // fix an IE bug (blur from empty input element with placeholder attribute trigger "input" event)
+          return;
+        }
       }
 
       var value = _this.props.value || '';
@@ -1455,7 +1487,7 @@ function (_React$Component) {
 
       if (startOfMention !== undefined && _this.state.selectionEnd > startOfMention) {
         // only if a deletion has taken place
-        selectionStart = startOfMention;
+        selectionStart = startOfMention + (ev.nativeEvent.data ? ev.nativeEvent.data.length : 0);
         selectionEnd = selectionStart;
         setSelectionAfterMentionChange = true;
       }
@@ -1815,7 +1847,7 @@ function (_React$Component) {
       if (queryId !== _this._queryId) return; // save in property so that multiple sync state updates from different mentions sources
       // won't overwrite each other
 
-      _this.suggestions = _objectSpread({}, _this.suggestions, _defineProperty({}, childIndex, {
+      _this.suggestions = _objectSpread(_objectSpread({}, _this.suggestions), {}, _defineProperty({}, childIndex, {
         queryInfo: {
           childIndex: childIndex,
           query: query,
@@ -1961,7 +1993,7 @@ function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      return React__default.createElement("div", _extends({
+      return /*#__PURE__*/React__default.createElement("div", _extends({
         ref: this.setContainerElement
       }, this.props.style), this.renderControl(), this.renderSuggestionsOverlay());
     }
@@ -1991,18 +2023,23 @@ function (_React$Component) {
       var newValue = spliceString(value, markupStartIndex, markupEndIndex, pastedMentions || pastedData).replace(/\r/g, '');
       var newPlainTextValue = getPlainText(newValue, config);
       var eventMock = {
-        target: _objectSpread({}, event.target, {
+        target: _objectSpread(_objectSpread({}, event.target), {}, {
           value: newValue
         })
       };
-      this.executeOnChange(eventMock, newValue, newPlainTextValue, getMentions(newValue, config));
+      this.executeOnChange(eventMock, newValue, newPlainTextValue, getMentions(newValue, config)); // Move the cursor position to the end of the pasted data
+
+      var startOfMention = findStartOfMentionInPlainText(value, config, selectionStart);
+      var nextPos = (startOfMention || selectionStart) + getPlainText(pastedMentions || pastedData, config).length;
+      this.setSelection(nextPos, nextPos);
     }
   }, {
     key: "saveSelectionToClipboard",
     value: function saveSelectionToClipboard(event) {
-      var _this$state4 = this.state,
-          selectionStart = _this$state4.selectionStart,
-          selectionEnd = _this$state4.selectionEnd;
+      // use the actual selectionStart & selectionEnd instead of the one stored
+      // in state to ensure copy & paste also works on disabled inputs & textareas
+      var selectionStart = this.inputElement.selectionStart;
+      var selectionEnd = this.inputElement.selectionEnd;
       var _this$props8 = this.props,
           children = _this$props8.children,
           value = _this$props8.value;
@@ -2044,9 +2081,9 @@ function (_React$Component) {
 
       event.preventDefault();
       this.saveSelectionToClipboard(event);
-      var _this$state5 = this.state,
-          selectionStart = _this$state5.selectionStart,
-          selectionEnd = _this$state5.selectionEnd;
+      var _this$state4 = this.state,
+          selectionStart = _this$state4.selectionStart,
+          selectionEnd = _this$state4.selectionEnd;
       var _this$props9 = this.props,
           children = _this$props9.children,
           value = _this$props9.value;
@@ -2056,7 +2093,7 @@ function (_React$Component) {
       var newValue = [value.slice(0, markupStartIndex), value.slice(markupEndIndex)].join('');
       var newPlainTextValue = getPlainText(newValue, config);
       var eventMock = {
-        target: _objectSpread({}, event.target, {
+        target: _objectSpread(_objectSpread({}, event.target), {}, {
           value: newPlainTextValue
         })
       };
@@ -2146,7 +2183,7 @@ var Mention = function Mention(_ref) {
     className: className,
     classNames: classNames
   });
-  return React__default.createElement("strong", styles, display);
+  return /*#__PURE__*/React__default.createElement("strong", styles, display);
 };
 
 Mention.propTypes = {