react-mentions 4.4.7 → 4.4.8

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # react-mentions
 
+## 4.4.8
+
+### Patch Changes
+
+- ad43016: Typing fix in SuggestionsOverlay.js
+- e13731f: Fix package.json properties for release
+- 3f40576: Fixed the suggestions container that was not aligned with the caret position
+- db2d91a: Fix cursor jumping to the end of the textfield when pasting and using React 18
+- 1eef7df: Fix scroll into view automatically
+- a69db87: Custom container scrolling fixed, now works like other containers
+
 ## 4.4.7
 
 ### Patch Changes

package/README.md

@@ -1,6 +1,4 @@
-# [React Mentions](https://react-mentions.now.sh)
-
-[![npm package][npm-badge]][npm]
+# [React Mentions](https://react-mentions.vercel.app)
 
 A React component that let's you mention people in a textarea like you are used to on Facebook or Twitter.
 

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

@@ -661,6 +661,10 @@ var omit = function omit(obj) {
 
 var _excluded = ["style", "className", "classNames"];
 
+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 createDefaultStyle(defaultStyle, getModifiers) {
   var enhance = function enhance(ComponentToWrap) {
     var DefaultStyleEnhancer = function DefaultStyleEnhancer(_ref) {
@@ -681,8 +685,13 @@ function createDefaultStyle(defaultStyle, getModifiers) {
     };
 
     var displayName = ComponentToWrap.displayName || ComponentToWrap.name || 'Component';
-    DefaultStyleEnhancer.displayName = "defaultStyle(".concat(displayName, ")");
-    return DefaultStyleEnhancer;
+    DefaultStyleEnhancer.displayName = "defaultStyle(".concat(displayName, ")"); // return DefaultStyleEnhancer
+
+    return /*#__PURE__*/React__default.forwardRef(function (props, ref) {
+      return DefaultStyleEnhancer(_objectSpread(_objectSpread({}, props), {}, {
+        ref: ref
+      }));
+    });
   };
 
   return enhance;
@@ -724,7 +733,7 @@ function Highlighter(_ref) {
 
   React.useEffect(function () {
     notifyCaretPosition();
-  }, [caretElement]);
+  });
 
   var notifyCaretPosition = function notifyCaretPosition() {
     if (!caretElement) {
@@ -973,7 +982,7 @@ function SuggestionsOverlay(_ref) {
       onMouseDown = _ref.onMouseDown,
       onMouseEnter = _ref.onMouseEnter;
 
-  var _useState = React.useState(),
+  var _useState = React.useState(undefined),
       _useState2 = _slicedToArray(_useState, 2),
       ulElement = _useState2[0],
       setUlElement = _useState2[1];
@@ -1000,17 +1009,23 @@ function SuggestionsOverlay(_ref) {
     } else if (bottom > ulElement.offsetHeight) {
       ulElement.scrollTop = bottom - ulElement.offsetHeight;
     }
-  }, []);
+  }, [focusIndex, scrollFocusedIntoView, ulElement]);
 
   var renderSuggestions = function renderSuggestions() {
-    var suggestionsToRender = Object.values(suggestions).reduce(function (accResults, _ref2) {
+    var suggestionsToRender = /*#__PURE__*/React__default.createElement("ul", _extends({
+      ref: setUlElement,
+      id: id,
+      role: "listbox",
+      "aria-label": a11ySuggestionsListLabel
+    }, style('list')), Object.values(suggestions).reduce(function (accResults, _ref2) {
       var results = _ref2.results,
           queryInfo = _ref2.queryInfo;
       return [].concat(_toConsumableArray(accResults), _toConsumableArray(results.map(function (result, index) {
         return renderSuggestion(result, queryInfo, accResults.length + index);
       })));
-    }, []);
-    if (customSuggestionsContainer) return customSuggestionsContainer(suggestionsToRender);else return suggestionsToRender;
+    }, []));
+    if (customSuggestionsContainer) return customSuggestionsContainer(suggestionsToRender);
+    return suggestionsToRender;
   };
 
   var renderSuggestion = function renderSuggestion(result, queryInfo, index) {
@@ -1077,12 +1092,7 @@ function SuggestionsOverlay(_ref) {
   }, style), {
     onMouseDown: onMouseDown,
     ref: containerRef
-  }), /*#__PURE__*/React__default.createElement("ul", _extends({
-    ref: setUlElement,
-    id: id,
-    role: "listbox",
-    "aria-label": a11ySuggestionsListLabel
-  }, style('list')), renderSuggestions()), renderLoadingIndicator());
+  }), renderSuggestions(), renderLoadingIndicator());
 }
 
 SuggestionsOverlay.propTypes = {
@@ -1099,7 +1109,7 @@ SuggestionsOverlay.propTypes = {
   isOpened: PropTypes.bool.isRequired,
   onSelect: PropTypes.func,
   ignoreAccents: PropTypes.bool,
-  customSuggestionsContainer: PropTypes.any,
+  customSuggestionsContainer: PropTypes.func,
   containerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: typeof Element === 'undefined' ? PropTypes.any : PropTypes.instanceOf(Element)
   })])
@@ -1117,9 +1127,9 @@ 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); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$1(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$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 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); }; }
 
@@ -1216,7 +1226,7 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
 
       var props = omit(_this.props, ['style', 'classNames', 'className'], // substyle props
       keys(propTypes));
-      return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, props), style('input')), {}, {
+      return _objectSpread$1(_objectSpread$1(_objectSpread$1(_objectSpread$1({}, props), style('input')), {}, {
         value: _this.getPlainText(),
         onScroll: _this.updateHighlighterScroll
       }, !readOnly && !disabled && {
@@ -1255,6 +1265,7 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "renderTextarea", function (props) {
       return /*#__PURE__*/React__default.createElement("textarea", _extends({
+        autoFocus: true,
         ref: _this.setInputRef
       }, props));
     });
@@ -1759,7 +1770,7 @@ var MentionsInput = /*#__PURE__*/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(_objectSpread({}, _this.suggestions), {}, _defineProperty({}, childIndex, {
+      _this.suggestions = _objectSpread$1(_objectSpread$1({}, _this.suggestions), {}, _defineProperty({}, childIndex, {
         queryInfo: {
           childIndex: childIndex,
           query: query,
@@ -1864,7 +1875,8 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
       selectionEnd: null,
       suggestions: {},
       caretPosition: null,
-      suggestionsPosition: {}
+      suggestionsPosition: {},
+      setSelectionAfterHandlePaste: false
     };
     return _this;
   }
@@ -1894,6 +1906,13 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
         });
         this.setSelection(this.state.selectionStart, this.state.selectionEnd);
       }
+
+      if (this.state.setSelectionAfterHandlePaste) {
+        this.setState({
+          setSelectionAfterHandlePaste: false
+        });
+        this.setSelection(this.state.selectionStart, this.state.selectionEnd);
+      }
     }
   }, {
     key: "componentWillUnmount",
@@ -1918,9 +1937,9 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
 
       if (!this.supportsClipboardActions(event)) {
         return;
-      }
+      } // event.preventDefault()
+
 
-      event.preventDefault();
       var _this$state3 = this.state,
           selectionStart = _this$state3.selectionStart,
           selectionEnd = _this$state3.selectionEnd;
@@ -1935,7 +1954,7 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
       var newValue = spliceString(value, markupStartIndex, markupEndIndex, pastedMentions || pastedData).replace(/\r/g, '');
       var newPlainTextValue = getPlainText(newValue, config);
       var eventMock = {
-        target: _objectSpread(_objectSpread({}, event.target), {}, {
+        target: _objectSpread$1(_objectSpread$1({}, event.target), {}, {
           value: newValue
         })
       };
@@ -1943,7 +1962,11 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
 
       var startOfMention = findStartOfMentionInPlainText(value, config, selectionStart);
       var nextPos = (startOfMention || selectionStart) + getPlainText(pastedMentions || pastedData, config).length;
-      this.setSelection(nextPos, nextPos);
+      this.setState({
+        selectionStart: nextPos,
+        selectionEnd: nextPos,
+        setSelectionAfterHandlePaste: true
+      });
     }
   }, {
     key: "saveSelectionToClipboard",
@@ -2005,7 +2028,7 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
       var newValue = [value.slice(0, markupStartIndex), value.slice(markupEndIndex)].join('');
       var newPlainTextValue = getPlainText(newValue, config);
       var eventMock = {
-        target: _objectSpread(_objectSpread({}, event.target), {}, {
+        target: _objectSpread$1(_objectSpread$1({}, event.target), {}, {
           value: newPlainTextValue
         })
       };
@@ -2062,7 +2085,7 @@ var styled$3 = createDefaultStyle({
     letterSpacing: 'inherit'
   },
   '&multiLine': {
-    input: _objectSpread({
+    input: _objectSpread$1({
       height: '100%',
       bottom: 0,
       overflow: 'hidden',

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

@@ -420,6 +420,29 @@ var _toConsumableArray = _interopDefault(require("@babel/runtime/helpers/toConsu
   }, {});
 }, _excluded = [ "style", "className", "classNames" ];
 
+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 createDefaultStyle(defaultStyle, getModifiers) {
   return function(ComponentToWrap) {
     var DefaultStyleEnhancer = function(_ref) {
@@ -433,7 +456,11 @@ function createDefaultStyle(defaultStyle, getModifiers) {
       }));
     }, displayName = ComponentToWrap.displayName || ComponentToWrap.name || "Component";
     return DefaultStyleEnhancer.displayName = "defaultStyle(".concat(displayName, ")"), 
-    DefaultStyleEnhancer;
+    React__default.forwardRef(function(props, ref) {
+      return DefaultStyleEnhancer(_objectSpread(_objectSpread({}, props), {}, {
+        ref: ref
+      }));
+    });
   };
 }
 
@@ -449,7 +476,7 @@ function Highlighter(_ref) {
   }), _useState2 = _slicedToArray(_useState, 2), position = _useState2[0], setPosition = _useState2[1], _useState3 = React.useState(), _useState4 = _slicedToArray(_useState3, 2), caretElement = _useState4[0], setCaretElement = _useState4[1];
   React.useEffect(function() {
     notifyCaretPosition();
-  }, [ caretElement ]);
+  });
   var caretPositionInMarkup, notifyCaretPosition = function() {
     if (caretElement) {
       var offsetLeft = caretElement.offsetLeft, offsetTop = caretElement.offsetTop;
@@ -585,13 +612,13 @@ var defaultstyle = {};
 function SuggestionsOverlay(_ref) {
   var id = _ref.id, _ref$suggestions = _ref.suggestions, suggestions = void 0 === _ref$suggestions ? {} : _ref$suggestions, a11ySuggestionsListLabel = _ref.a11ySuggestionsListLabel, focusIndex = _ref.focusIndex, position = _ref.position, left = _ref.left, right = _ref.right, top = _ref.top, scrollFocusedIntoView = _ref.scrollFocusedIntoView, isLoading = _ref.isLoading, isOpened = _ref.isOpened, _ref$onSelect = _ref.onSelect, onSelect = void 0 === _ref$onSelect ? function() {
     return null;
-  } : _ref$onSelect, ignoreAccents = _ref.ignoreAccents, containerRef = _ref.containerRef, children = _ref.children, style = _ref.style, customSuggestionsContainer = _ref.customSuggestionsContainer, onMouseDown = _ref.onMouseDown, onMouseEnter = _ref.onMouseEnter, _useState = React.useState(), _useState2 = _slicedToArray(_useState, 2), ulElement = _useState2[0], setUlElement = _useState2[1];
+  } : _ref$onSelect, ignoreAccents = _ref.ignoreAccents, containerRef = _ref.containerRef, children = _ref.children, style = _ref.style, customSuggestionsContainer = _ref.customSuggestionsContainer, onMouseDown = _ref.onMouseDown, onMouseEnter = _ref.onMouseEnter, _useState = React.useState(void 0), _useState2 = _slicedToArray(_useState, 2), ulElement = _useState2[0], setUlElement = _useState2[1];
   React.useEffect(function() {
     if (ulElement && !(ulElement.offsetHeight >= ulElement.scrollHeight) && scrollFocusedIntoView) {
       var scrollTop = ulElement.scrollTop, _ulElement$children$f = ulElement.children[focusIndex].getBoundingClientRect(), top = _ulElement$children$f.top, bottom = _ulElement$children$f.bottom, topContainer = ulElement.getBoundingClientRect().top;
       bottom = bottom - topContainer + scrollTop, (top = top - topContainer + scrollTop) < scrollTop ? ulElement.scrollTop = top : bottom > ulElement.offsetHeight && (ulElement.scrollTop = bottom - ulElement.offsetHeight);
     }
-  }, []);
+  }, [ focusIndex, scrollFocusedIntoView, ulElement ]);
   var suggestionsToRender, renderSuggestion = function(result, queryInfo, index) {
     var isFocused = index === focusIndex, childIndex = queryInfo.childIndex, query = queryInfo.query, renderSuggestion = React.Children.toArray(children)[childIndex].props.renderSuggestion;
     return React__default.createElement(Suggestion$1, {
@@ -626,17 +653,17 @@ function SuggestionsOverlay(_ref) {
   }, style), {
     onMouseDown: onMouseDown,
     ref: containerRef
-  }), React__default.createElement("ul", _extends({
+  }), (suggestionsToRender = React__default.createElement("ul", _extends({
     ref: setUlElement,
     id: id,
     role: "listbox",
     "aria-label": a11ySuggestionsListLabel
-  }, style("list")), (suggestionsToRender = Object.values(suggestions).reduce(function(accResults, _ref2) {
+  }, style("list")), Object.values(suggestions).reduce(function(accResults, _ref2) {
     var results = _ref2.results, queryInfo = _ref2.queryInfo;
     return [].concat(_toConsumableArray(accResults), _toConsumableArray(results.map(function(result, index) {
       return renderSuggestion(result, queryInfo, accResults.length + index);
     })));
-  }, []), customSuggestionsContainer ? customSuggestionsContainer(suggestionsToRender) : suggestionsToRender)), function() {
+  }, [])), customSuggestionsContainer ? customSuggestionsContainer(suggestionsToRender) : suggestionsToRender), function() {
     if (isLoading) return React__default.createElement(LoadingIndicator, {
       style: style("loadingIndicator")
     });
@@ -657,7 +684,7 @@ SuggestionsOverlay.propTypes = {
   isOpened: PropTypes.bool.isRequired,
   onSelect: PropTypes.func,
   ignoreAccents: PropTypes.bool,
-  customSuggestionsContainer: PropTypes.any,
+  customSuggestionsContainer: PropTypes.func,
   containerRef: PropTypes.oneOfType([ PropTypes.func, PropTypes.shape({
     current: "undefined" == typeof Element ? PropTypes.any : PropTypes.instanceOf(Element)
   }) ])
@@ -675,7 +702,7 @@ var styled$2 = createDefaultStyle({
   }
 }), SuggestionsOverlay$1 = styled$2(SuggestionsOverlay);
 
-function ownKeys(object, enumerableOnly) {
+function ownKeys$1(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
@@ -686,12 +713,12 @@ function ownKeys(object, enumerableOnly) {
   return keys;
 }
 
-function _objectSpread(target) {
+function _objectSpread$1(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) {
+    i % 2 ? ownKeys$1(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.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function(key) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
     });
   }
@@ -769,7 +796,7 @@ var makeTriggerRegex = function(trigger) {
       _this.containerElement = el;
     }), _defineProperty(_assertThisInitialized(_this), "getInputProps", function() {
       var _this$props = _this.props, readOnly = _this$props.readOnly, disabled = _this$props.disabled, style = _this$props.style;
-      return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, omit(_this.props, [ "style", "classNames", "className" ], keys(propTypes))), style("input")), {}, {
+      return _objectSpread$1(_objectSpread$1(_objectSpread$1(_objectSpread$1({}, omit(_this.props, [ "style", "classNames", "className" ], keys(propTypes))), style("input")), {}, {
         value: _this.getPlainText(),
         onScroll: _this.updateHighlighterScroll
       }, !readOnly && !disabled && {
@@ -797,6 +824,7 @@ var makeTriggerRegex = function(trigger) {
       }, props));
     }), _defineProperty(_assertThisInitialized(_this), "renderTextarea", function(props) {
       return React__default.createElement("textarea", _extends({
+        autoFocus: !0,
         ref: _this.setInputRef
       }, props));
     }), _defineProperty(_assertThisInitialized(_this), "setInputRef", function(el) {
@@ -1005,7 +1033,7 @@ var makeTriggerRegex = function(trigger) {
       syncResult instanceof Array && _this.updateSuggestions(_this._queryId, childIndex, query, querySequenceStart, querySequenceEnd, plainTextValue, syncResult);
     }), _defineProperty(_assertThisInitialized(_this), "updateSuggestions", function(queryId, childIndex, query, querySequenceStart, querySequenceEnd, plainTextValue, results) {
       if (queryId === _this._queryId) {
-        _this.suggestions = _objectSpread(_objectSpread({}, _this.suggestions), {}, _defineProperty({}, childIndex, {
+        _this.suggestions = _objectSpread$1(_objectSpread$1({}, _this.suggestions), {}, _defineProperty({}, childIndex, {
           queryInfo: {
             childIndex: childIndex,
             query: query,
@@ -1057,7 +1085,8 @@ var makeTriggerRegex = function(trigger) {
       selectionEnd: null,
       suggestions: {},
       caretPosition: null,
-      suggestionsPosition: {}
+      suggestionsPosition: {},
+      setSelectionAfterHandlePaste: !1
     }, _this;
   }
   return _createClass(MentionsInput, [ {
@@ -1072,6 +1101,8 @@ var makeTriggerRegex = function(trigger) {
       prevState.suggestionsPosition === this.state.suggestionsPosition && this.updateSuggestionsPosition(), 
       this.state.setSelectionAfterMentionChange && (this.setState({
         setSelectionAfterMentionChange: !1
+      }), this.setSelection(this.state.selectionStart, this.state.selectionEnd)), this.state.setSelectionAfterHandlePaste && (this.setState({
+        setSelectionAfterHandlePaste: !1
       }), this.setSelection(this.state.selectionStart, this.state.selectionEnd));
     }
   }, {
@@ -1091,15 +1122,18 @@ var makeTriggerRegex = function(trigger) {
     key: "handlePaste",
     value: function(event) {
       if (event.target === this.inputElement && this.supportsClipboardActions(event)) {
-        event.preventDefault();
         var _this$state3 = this.state, selectionStart = _this$state3.selectionStart, selectionEnd = _this$state3.selectionEnd, _this$props7 = this.props, value = _this$props7.value, children = _this$props7.children, config = readConfigFromChildren(children), markupStartIndex = mapPlainTextIndex(value, config, selectionStart, "START"), markupEndIndex = mapPlainTextIndex(value, config, selectionEnd, "END"), pastedMentions = event.clipboardData.getData("text/react-mentions"), pastedData = event.clipboardData.getData("text/plain"), newValue = spliceString(value, markupStartIndex, markupEndIndex, pastedMentions || pastedData).replace(/\r/g, ""), newPlainTextValue = getPlainText(newValue, config), eventMock = {
-          target: _objectSpread(_objectSpread({}, event.target), {}, {
+          target: _objectSpread$1(_objectSpread$1({}, event.target), {}, {
             value: newValue
           })
         };
         this.executeOnChange(eventMock, newValue, newPlainTextValue, getMentions(newValue, config));
         var nextPos = (findStartOfMentionInPlainText(value, config, selectionStart) || selectionStart) + getPlainText(pastedMentions || pastedData, config).length;
-        this.setSelection(nextPos, nextPos);
+        this.setState({
+          selectionStart: nextPos,
+          selectionEnd: nextPos,
+          setSelectionAfterHandlePaste: !0
+        });
       }
     }
   }, {
@@ -1126,7 +1160,7 @@ var makeTriggerRegex = function(trigger) {
       if (event.target === this.inputElement && this.supportsClipboardActions(event)) {
         event.preventDefault(), this.saveSelectionToClipboard(event);
         var _this$state4 = this.state, selectionStart = _this$state4.selectionStart, selectionEnd = _this$state4.selectionEnd, _this$props9 = this.props, children = _this$props9.children, value = _this$props9.value, config = readConfigFromChildren(children), markupStartIndex = mapPlainTextIndex(value, config, selectionStart, "START"), markupEndIndex = mapPlainTextIndex(value, config, selectionEnd, "END"), newValue = [ value.slice(0, markupStartIndex), value.slice(markupEndIndex) ].join(""), newPlainTextValue = getPlainText(newValue, config), eventMock = {
-          target: _objectSpread(_objectSpread({}, event.target), {}, {
+          target: _objectSpread$1(_objectSpread$1({}, event.target), {}, {
             value: newPlainTextValue
           })
         };
@@ -1171,7 +1205,7 @@ var getComputedStyleLengthProp = function(forElement, propertyName) {
     letterSpacing: "inherit"
   },
   "&multiLine": {
-    input: _objectSpread({
+    input: _objectSpread$1({
       height: "100%",
       bottom: 0,
       overflow: "hidden",

package/dist/react-mentions.esm.js

@@ -653,6 +653,10 @@ var omit = function omit(obj) {
 
 var _excluded = ["style", "className", "classNames"];
 
+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 createDefaultStyle(defaultStyle, getModifiers) {
   var enhance = function enhance(ComponentToWrap) {
     var DefaultStyleEnhancer = function DefaultStyleEnhancer(_ref) {
@@ -673,8 +677,13 @@ function createDefaultStyle(defaultStyle, getModifiers) {
     };
 
     var displayName = ComponentToWrap.displayName || ComponentToWrap.name || 'Component';
-    DefaultStyleEnhancer.displayName = "defaultStyle(".concat(displayName, ")");
-    return DefaultStyleEnhancer;
+    DefaultStyleEnhancer.displayName = "defaultStyle(".concat(displayName, ")"); // return DefaultStyleEnhancer
+
+    return /*#__PURE__*/React.forwardRef(function (props, ref) {
+      return DefaultStyleEnhancer(_objectSpread(_objectSpread({}, props), {}, {
+        ref: ref
+      }));
+    });
   };
 
   return enhance;
@@ -716,7 +725,7 @@ function Highlighter(_ref) {
 
   useEffect(function () {
     notifyCaretPosition();
-  }, [caretElement]);
+  });
 
   var notifyCaretPosition = function notifyCaretPosition() {
     if (!caretElement) {
@@ -965,7 +974,7 @@ function SuggestionsOverlay(_ref) {
       onMouseDown = _ref.onMouseDown,
       onMouseEnter = _ref.onMouseEnter;
 
-  var _useState = useState(),
+  var _useState = useState(undefined),
       _useState2 = _slicedToArray(_useState, 2),
       ulElement = _useState2[0],
       setUlElement = _useState2[1];
@@ -992,17 +1001,23 @@ function SuggestionsOverlay(_ref) {
     } else if (bottom > ulElement.offsetHeight) {
       ulElement.scrollTop = bottom - ulElement.offsetHeight;
     }
-  }, []);
+  }, [focusIndex, scrollFocusedIntoView, ulElement]);
 
   var renderSuggestions = function renderSuggestions() {
-    var suggestionsToRender = Object.values(suggestions).reduce(function (accResults, _ref2) {
+    var suggestionsToRender = /*#__PURE__*/React.createElement("ul", _extends({
+      ref: setUlElement,
+      id: id,
+      role: "listbox",
+      "aria-label": a11ySuggestionsListLabel
+    }, style('list')), Object.values(suggestions).reduce(function (accResults, _ref2) {
       var results = _ref2.results,
           queryInfo = _ref2.queryInfo;
       return [].concat(_toConsumableArray(accResults), _toConsumableArray(results.map(function (result, index) {
         return renderSuggestion(result, queryInfo, accResults.length + index);
       })));
-    }, []);
-    if (customSuggestionsContainer) return customSuggestionsContainer(suggestionsToRender);else return suggestionsToRender;
+    }, []));
+    if (customSuggestionsContainer) return customSuggestionsContainer(suggestionsToRender);
+    return suggestionsToRender;
   };
 
   var renderSuggestion = function renderSuggestion(result, queryInfo, index) {
@@ -1069,12 +1084,7 @@ function SuggestionsOverlay(_ref) {
   }, style), {
     onMouseDown: onMouseDown,
     ref: containerRef
-  }), /*#__PURE__*/React.createElement("ul", _extends({
-    ref: setUlElement,
-    id: id,
-    role: "listbox",
-    "aria-label": a11ySuggestionsListLabel
-  }, style('list')), renderSuggestions()), renderLoadingIndicator());
+  }), renderSuggestions(), renderLoadingIndicator());
 }
 
 SuggestionsOverlay.propTypes = {
@@ -1091,7 +1101,7 @@ SuggestionsOverlay.propTypes = {
   isOpened: PropTypes.bool.isRequired,
   onSelect: PropTypes.func,
   ignoreAccents: PropTypes.bool,
-  customSuggestionsContainer: PropTypes.any,
+  customSuggestionsContainer: PropTypes.func,
   containerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: typeof Element === 'undefined' ? PropTypes.any : PropTypes.instanceOf(Element)
   })])
@@ -1109,9 +1119,9 @@ 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); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$1(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$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 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); }; }
 
@@ -1208,7 +1218,7 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
 
       var props = omit(_this.props, ['style', 'classNames', 'className'], // substyle props
       keys(propTypes));
-      return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, props), style('input')), {}, {
+      return _objectSpread$1(_objectSpread$1(_objectSpread$1(_objectSpread$1({}, props), style('input')), {}, {
         value: _this.getPlainText(),
         onScroll: _this.updateHighlighterScroll
       }, !readOnly && !disabled && {
@@ -1247,6 +1257,7 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "renderTextarea", function (props) {
       return /*#__PURE__*/React.createElement("textarea", _extends({
+        autoFocus: true,
         ref: _this.setInputRef
       }, props));
     });
@@ -1751,7 +1762,7 @@ var MentionsInput = /*#__PURE__*/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(_objectSpread({}, _this.suggestions), {}, _defineProperty({}, childIndex, {
+      _this.suggestions = _objectSpread$1(_objectSpread$1({}, _this.suggestions), {}, _defineProperty({}, childIndex, {
         queryInfo: {
           childIndex: childIndex,
           query: query,
@@ -1856,7 +1867,8 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
       selectionEnd: null,
       suggestions: {},
       caretPosition: null,
-      suggestionsPosition: {}
+      suggestionsPosition: {},
+      setSelectionAfterHandlePaste: false
     };
     return _this;
   }
@@ -1886,6 +1898,13 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
         });
         this.setSelection(this.state.selectionStart, this.state.selectionEnd);
       }
+
+      if (this.state.setSelectionAfterHandlePaste) {
+        this.setState({
+          setSelectionAfterHandlePaste: false
+        });
+        this.setSelection(this.state.selectionStart, this.state.selectionEnd);
+      }
     }
   }, {
     key: "componentWillUnmount",
@@ -1910,9 +1929,9 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
 
       if (!this.supportsClipboardActions(event)) {
         return;
-      }
+      } // event.preventDefault()
+
 
-      event.preventDefault();
       var _this$state3 = this.state,
           selectionStart = _this$state3.selectionStart,
           selectionEnd = _this$state3.selectionEnd;
@@ -1927,7 +1946,7 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
       var newValue = spliceString(value, markupStartIndex, markupEndIndex, pastedMentions || pastedData).replace(/\r/g, '');
       var newPlainTextValue = getPlainText(newValue, config);
       var eventMock = {
-        target: _objectSpread(_objectSpread({}, event.target), {}, {
+        target: _objectSpread$1(_objectSpread$1({}, event.target), {}, {
           value: newValue
         })
       };
@@ -1935,7 +1954,11 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
 
       var startOfMention = findStartOfMentionInPlainText(value, config, selectionStart);
       var nextPos = (startOfMention || selectionStart) + getPlainText(pastedMentions || pastedData, config).length;
-      this.setSelection(nextPos, nextPos);
+      this.setState({
+        selectionStart: nextPos,
+        selectionEnd: nextPos,
+        setSelectionAfterHandlePaste: true
+      });
     }
   }, {
     key: "saveSelectionToClipboard",
@@ -1997,7 +2020,7 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
       var newValue = [value.slice(0, markupStartIndex), value.slice(markupEndIndex)].join('');
       var newPlainTextValue = getPlainText(newValue, config);
       var eventMock = {
-        target: _objectSpread(_objectSpread({}, event.target), {}, {
+        target: _objectSpread$1(_objectSpread$1({}, event.target), {}, {
           value: newPlainTextValue
         })
       };
@@ -2054,7 +2077,7 @@ var styled$3 = createDefaultStyle({
     letterSpacing: 'inherit'
   },
   '&multiLine': {
-    input: _objectSpread({
+    input: _objectSpread$1({
       height: '100%',
       bottom: 0,
       overflow: 'hidden',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-mentions",
-  "version": "4.4.7",
+  "version": "4.4.8",
   "description": "React mentions input",
   "main": "dist/react-mentions.cjs.js",
   "module": "dist/react-mentions.esm.js",