react-mention-input 1.1.25 → 1.1.26

package/dist/MentionInput.js

@@ -48,7 +48,7 @@ import ReactDOM from "react-dom";
 import "./MentionInput.css";
 var MentionInput = function (_a) {
     var _b;
-    var users = _a.users, _c = _a.placeholder, placeholder = _c === void 0 ? "Type a message... (or drag & drop an image)" : _c, containerClassName = _a.containerClassName, inputContainerClassName = _a.inputContainerClassName, inputClassName = _a.inputClassName, sendBtnClassName = _a.sendBtnClassName, suggestionListClassName = _a.suggestionListClassName, suggestionItemClassName = _a.suggestionItemClassName, imgClassName = _a.imgClassName, imgStyle = _a.imgStyle, attachedImageContainerClassName = _a.attachedImageContainerClassName, attachedImageContainerStyle = _a.attachedImageContainerStyle, sendButtonIcon = _a.sendButtonIcon, attachmentButtonIcon = _a.attachmentButtonIcon, onSendMessage = _a.onSendMessage, _d = _a.suggestionPosition, suggestionPosition = _d === void 0 ? 'bottom' : _d, onImageUpload = _a.onImageUpload;
+    var users = _a.users, _c = _a.placeholder, placeholder = _c === void 0 ? "Type a message... (or drag & drop an image)" : _c, containerClassName = _a.containerClassName, inputContainerClassName = _a.inputContainerClassName, inputClassName = _a.inputClassName, sendBtnClassName = _a.sendBtnClassName, suggestionListClassName = _a.suggestionListClassName, suggestionItemClassName = _a.suggestionItemClassName, imgClassName = _a.imgClassName, imgStyle = _a.imgStyle, attachedImageContainerClassName = _a.attachedImageContainerClassName, attachedImageContainerStyle = _a.attachedImageContainerStyle, sendButtonIcon = _a.sendButtonIcon, attachmentButtonIcon = _a.attachmentButtonIcon, onSendMessage = _a.onSendMessage, _d = _a.suggestionPosition, suggestionPosition = _d === void 0 ? 'top' : _d, onImageUpload = _a.onImageUpload;
     var _e = useState(""), inputValue = _e[0], setInputValue = _e[1]; // Plain text
     var _f = useState([]), suggestions = _f[0], setSuggestions = _f[1];
     var _g = useState(false), showSuggestions = _g[0], setShowSuggestions = _g[1];
@@ -229,6 +229,7 @@ var MentionInput = function (_a) {
         }
     };
     var renderSuggestions = function () {
+        var _a, _b, _c, _d, _e, _f;
         if (!showSuggestions || !inputRef.current)
             return null;
         var getInitials = function (name) {
@@ -240,27 +241,32 @@ var MentionInput = function (_a) {
             return initials;
         };
         var inputRect = inputRef.current.getBoundingClientRect();
+        var scrollLeft = (_c = (_b = (_a = window.scrollX) !== null && _a !== void 0 ? _a : window.pageXOffset) !== null && _b !== void 0 ? _b : document.documentElement.scrollLeft) !== null && _c !== void 0 ? _c : 0;
+        var scrollTop = (_f = (_e = (_d = window.scrollY) !== null && _d !== void 0 ? _d : window.pageYOffset) !== null && _e !== void 0 ? _e : document.documentElement.scrollTop) !== null && _f !== void 0 ? _f : 0;
         var styles = {
             position: 'absolute',
             zIndex: 1000,
+            minWidth: inputRect.width,
         };
         // Use suggestionPosition prop to adjust tooltip position
         switch (suggestionPosition) {
             case 'top':
-                styles.left = "".concat(inputRect.left, "px");
-                styles.top = "".concat(inputRect.top - 150, "px");
+                styles.left = "".concat(inputRect.left + scrollLeft, "px");
+                styles.top = "".concat(inputRect.top + scrollTop - 8, "px");
+                styles.transform = 'translateY(-100%)';
                 break;
             case 'bottom':
-                styles.left = "".concat(inputRect.left, "px");
-                styles.top = "".concat(inputRect.bottom, "px");
+                styles.left = "".concat(inputRect.left + scrollLeft, "px");
+                styles.top = "".concat(inputRect.bottom + scrollTop + 8, "px");
                 break;
             case 'left':
-                styles.left = "".concat(inputRect.left - 150, "px");
-                styles.top = "".concat(inputRect.top, "px");
+                styles.left = "".concat(inputRect.left + scrollLeft - 8, "px");
+                styles.top = "".concat(inputRect.top + scrollTop, "px");
+                styles.transform = "".concat(styles.transform ? "".concat(styles.transform, " ") : '', "translateX(-100%)");
                 break;
             case 'right':
-                styles.left = "".concat(inputRect.right, "px");
-                styles.top = "".concat(inputRect.top, "px");
+                styles.left = "".concat(inputRect.right + scrollLeft + 8, "px");
+                styles.top = "".concat(inputRect.top + scrollTop, "px");
                 break;
             default:
                 break;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-mention-input",
-  "version": "1.1.25",
+  "version": "1.1.26",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {

package/src/MentionInput.tsx

@@ -50,7 +50,7 @@ const MentionInput: React.FC<MentionInputProps> = ({
   sendButtonIcon,
   attachmentButtonIcon,
   onSendMessage,
-  suggestionPosition = 'bottom',
+  suggestionPosition = 'top',
   onImageUpload,
 }) => {
   const [inputValue, setInputValue] = useState<string>(""); // Plain text
@@ -302,28 +302,35 @@ const MentionInput: React.FC<MentionInputProps> = ({
     };
     
     const inputRect = inputRef.current.getBoundingClientRect();
+    const scrollLeft =
+      window.scrollX ?? window.pageXOffset ?? document.documentElement.scrollLeft ?? 0;
+    const scrollTop =
+      window.scrollY ?? window.pageYOffset ?? document.documentElement.scrollTop ?? 0;
     const styles: React.CSSProperties = {
       position: 'absolute',
       zIndex: 1000,
+      minWidth: inputRect.width,
     };
 
     // Use suggestionPosition prop to adjust tooltip position
     switch (suggestionPosition) {
       case 'top':
-        styles.left = `${inputRect.left}px`;
-        styles.top = `${inputRect.top - 150}px`;
+        styles.left = `${inputRect.left + scrollLeft}px`;
+        styles.top = `${inputRect.top + scrollTop - 8}px`;
+        styles.transform = 'translateY(-100%)';
         break;
       case 'bottom':
-        styles.left = `${inputRect.left}px`;
-        styles.top = `${inputRect.bottom}px`;
+        styles.left = `${inputRect.left + scrollLeft}px`;
+        styles.top = `${inputRect.bottom + scrollTop + 8}px`;
         break;
       case 'left':
-        styles.left = `${inputRect.left - 150}px`;
-        styles.top = `${inputRect.top}px`;
+        styles.left = `${inputRect.left + scrollLeft - 8}px`;
+        styles.top = `${inputRect.top + scrollTop}px`;
+        styles.transform = `${styles.transform ? `${styles.transform} ` : ''}translateX(-100%)`;
         break;
       case 'right':
-        styles.left = `${inputRect.right}px`;
-        styles.top = `${inputRect.top}px`;
+        styles.left = `${inputRect.right + scrollLeft + 8}px`;
+        styles.top = `${inputRect.top + scrollTop}px`;
         break;
       default:
         break;