react-mentions 4.3.0 → 4.4.0

package/dist/react-mentions.esm.js

@@ -2,10 +2,10 @@ import _toConsumableArray from '@babel/runtime/helpers/esm/toConsumableArray';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
 import _createClass from '@babel/runtime/helpers/esm/createClass';
-import _possibleConstructorReturn from '@babel/runtime/helpers/esm/possibleConstructorReturn';
-import _getPrototypeOf from '@babel/runtime/helpers/esm/getPrototypeOf';
 import _assertThisInitialized from '@babel/runtime/helpers/esm/assertThisInitialized';
 import _inherits from '@babel/runtime/helpers/esm/inherits';
+import _possibleConstructorReturn from '@babel/runtime/helpers/esm/possibleConstructorReturn';
+import _getPrototypeOf from '@babel/runtime/helpers/esm/getPrototypeOf';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import React, { Children, Component } from 'react';
 import invariant from 'invariant';
@@ -621,6 +621,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';
 };
@@ -647,13 +651,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(defaultStyle, {
@@ -661,7 +667,7 @@ function createDefaultStyle(defaultStyle, getModifiers) {
         className: className,
         classNames: classNames
       }, modifiers);
-      return React.createElement(ComponentToWrap, _extends({}, rest, {
+      return /*#__PURE__*/React.createElement(ComponentToWrap, _extends({}, rest, {
         style: styles
       }));
     };
@@ -674,6 +680,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;
@@ -684,17 +694,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;
@@ -797,7 +807,7 @@ function (_Component) {
         resultComponents.push(this.renderHighlighterCaret(components));
       }
 
-      return React.createElement("div", _extends({}, style, {
+      return /*#__PURE__*/React.createElement("div", _extends({}, style, {
         ref: containerRef
       }), resultComponents);
     }
@@ -805,7 +815,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.createElement("span", _extends({}, this.props.style('substring'), {
+      return /*#__PURE__*/React.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
@@ -819,13 +829,13 @@ function (_Component) {
         key: key
       };
       var child = Children.toArray(this.props.children)[mentionChildIndex];
-      return React.cloneElement(child, props);
+      return /*#__PURE__*/React.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.createElement("span", _extends({}, this.props.style('caret'), {
+      return /*#__PURE__*/React.createElement("span", _extends({}, this.props.style('caret'), {
         ref: this.setCaretElement,
         key: "caret"
       }), children);
@@ -874,15 +884,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, [{
@@ -890,7 +904,7 @@ function (_Component) {
     value: function render() {
       var rest = omit(this.props, ['style', 'classNames', 'className'], // substyle props
       keys(Suggestion.propTypes));
-      return React.createElement("li", _extends({
+      return /*#__PURE__*/React.createElement("li", _extends({
         id: this.props.id,
         role: "option",
         "aria-selected": this.props.focused
@@ -942,10 +956,10 @@ function (_Component) {
       var i = getSubstringIndex(display, query, ignoreAccents);
 
       if (i === -1) {
-        return React.createElement("span", style('display'), display);
+        return /*#__PURE__*/React.createElement("span", style('display'), display);
       }
 
-      return React.createElement("span", style('display'), display.substring(0, i), React.createElement("b", style('highlight'), display.substring(i, i + query.length)), display.substring(i + query.length));
+      return /*#__PURE__*/React.createElement("span", style('display'), display.substring(0, i), /*#__PURE__*/React.createElement("b", style('highlight'), display.substring(i, i + query.length)), display.substring(i + query.length));
     }
   }]);
 
@@ -977,17 +991,19 @@ var Suggestion$1 = styled$1(Suggestion);
 function LoadingIndicator() {
   var styles = useStyles();
   var spinnerStyles = styles('spinner');
-  return React.createElement("div", styles, React.createElement("div", spinnerStyles, React.createElement("div", spinnerStyles(['element', 'element1'])), React.createElement("div", spinnerStyles(['element', 'element2'])), React.createElement("div", spinnerStyles(['element', 'element3'])), React.createElement("div", spinnerStyles(['element', 'element4'])), React.createElement("div", spinnerStyles(['element', 'element5']))));
+  return /*#__PURE__*/React.createElement("div", styles, /*#__PURE__*/React.createElement("div", spinnerStyles, /*#__PURE__*/React.createElement("div", spinnerStyles(['element', 'element1'])), /*#__PURE__*/React.createElement("div", spinnerStyles(['element', 'element2'])), /*#__PURE__*/React.createElement("div", spinnerStyles(['element', 'element3'])), /*#__PURE__*/React.createElement("div", spinnerStyles(['element', 'element4'])), /*#__PURE__*/React.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);
@@ -996,7 +1012,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) {
@@ -1052,20 +1068,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.createElement("div", _extends({}, inline({
+      return /*#__PURE__*/React.createElement("div", _extends({}, inline({
         position: position || 'absolute',
         left: left,
+        right: right,
         top: top
       }, style), {
         onMouseDown: onMouseDown,
         ref: containerRef
-      }), React.createElement("ul", _extends({
+      }), /*#__PURE__*/React.createElement("ul", _extends({
         ref: this.setUlElement,
         id: id,
         role: "listbox",
@@ -1077,13 +1095,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",
@@ -1095,7 +1115,7 @@ function (_Component) {
           query = queryInfo.query;
       var renderSuggestion = Children.toArray(this.props.children)[childIndex].props.renderSuggestion;
       var ignoreAccents = this.props.ignoreAccents;
-      return React.createElement(Suggestion$1, {
+      return /*#__PURE__*/React.createElement(Suggestion$1, {
         style: this.props.style('item'),
         key: "".concat(childIndex, "-").concat(getID(result)),
         id: getSuggestionHtmlId(this.props.id, index),
@@ -1120,7 +1140,7 @@ function (_Component) {
         return;
       }
 
-      return React.createElement(LoadingIndicator, {
+      return /*#__PURE__*/React.createElement(LoadingIndicator, {
         style: this.props.style('loadingIndicator')
       });
     }
@@ -1136,6 +1156,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,
@@ -1176,9 +1197,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] : {};
 
@@ -1236,6 +1261,7 @@ var propTypes = {
   a11ySuggestionsListLabel: PropTypes.string,
   value: PropTypes.string,
   onKeyDown: PropTypes.func,
+  customSuggestionsContainer: PropTypes.func,
   onSelect: PropTypes.func,
   onBlur: PropTypes.func,
   onChange: PropTypes.func,
@@ -1246,17 +1272,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;
@@ -1270,7 +1296,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,
@@ -1280,7 +1306,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,
@@ -1297,18 +1323,18 @@ function (_React$Component) {
 
       var inputProps = _this.getInputProps();
 
-      return React.createElement("div", style('control'), _this.renderHighlighter(), singleLine ? _this.renderInput(inputProps) : _this.renderTextarea(inputProps));
+      return /*#__PURE__*/React.createElement("div", style('control'), _this.renderHighlighter(), singleLine ? _this.renderInput(inputProps) : _this.renderTextarea(inputProps));
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderInput", function (props) {
-      return React.createElement("input", _extends({
+      return /*#__PURE__*/React.createElement("input", _extends({
         type: "text",
         ref: _this.setInputRef
       }, props));
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderTextarea", function (props) {
-      return React.createElement("textarea", _extends({
+      return /*#__PURE__*/React.createElement("textarea", _extends({
         ref: _this.setInputRef
       }, props));
     });
@@ -1337,17 +1363,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.createElement(SuggestionsOverlay$1, {
+          top = _this$state$suggestio.top,
+          right = _this$state$suggestio.right;
+      var suggestionsNode = /*#__PURE__*/React.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,
@@ -1358,7 +1387,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;
       }
@@ -1373,7 +1402,7 @@ function (_React$Component) {
           children = _this$props3.children,
           value = _this$props3.value,
           style = _this$props3.style;
-      return React.createElement(Highlighter$1, {
+      return /*#__PURE__*/React.createElement(Highlighter$1, {
         containerRef: _this.setHighlighterElement,
         style: style('highlighter'),
         value: value,
@@ -1417,13 +1446,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 || '';
@@ -1447,7 +1479,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;
       }
@@ -1807,7 +1839,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,
@@ -1953,7 +1985,7 @@ function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      return React.createElement("div", _extends({
+      return /*#__PURE__*/React.createElement("div", _extends({
         ref: this.setContainerElement
       }, this.props.style), this.renderControl(), this.renderSuggestionsOverlay());
     }
@@ -1983,18 +2015,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;
@@ -2036,9 +2073,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;
@@ -2048,7 +2085,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
         })
       };
@@ -2138,7 +2175,7 @@ var Mention = function Mention(_ref) {
     className: className,
     classNames: classNames
   });
-  return React.createElement("strong", styles, display);
+  return /*#__PURE__*/React.createElement("strong", styles, display);
 };
 
 Mention.propTypes = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-mentions",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "description": "React mentions input",
   "main": "dist/react-mentions.cjs.js",
   "module": "dist/react-mentions.esm.js",
@@ -11,7 +11,7 @@
     "build": "preconstruct build",
     "format": "prettier --write --no-semi --single-quote --trailing-comma es5 \"{src,test,demo/src}/**/*.js\"",
     "lint": "eslint --max-warnings=0 --ext .js src test demo",
-    "start": "cross-env NODE_ENV=development webpack-dev-server --config demo/webpack.config.js",
+    "start": "cross-env NODE_OPTIONS=--openssl-legacy-provider NODE_ENV=development webpack-dev-server --config demo/webpack.config.js",
     "semantic-release": "semantic-release",
     "test": "jest",
     "now-build": "webpack --config demo/webpack.config.js"
@@ -50,7 +50,7 @@
     "babel-eslint": "^7.2.3",
     "babel-loader": "^8.0.6",
     "case-sensitive-paths-webpack-plugin": "^2.2.0",
-    "condition-circle": "^2.0.1",
+    "condition-circle": "^2.0.2",
     "core-js": "^3.1.4",
     "cross-env": "^5.2.1",
     "css-loader": "^3.0.0",
@@ -74,7 +74,7 @@
     "react-dom": "16.8.6",
     "recompose": "^0.30.0",
     "regenerator-runtime": "^0.13.2",
-    "semantic-release": "^12.4.1",
+    "semantic-release": "^19.0.2",
     "style-loader": "^0.23.1",
     "substyle-jss": "^4.0.1",
     "webpack": "^4.35.2",
@@ -90,8 +90,5 @@
   "peerDependencies": {
     "react": ">=16.8.3",
     "react-dom": ">=16.8.3"
-  },
-  "release": {
-    "verifyConditions": "condition-circle"
   }
 }