react-mention-input 1.1.9 → 1.1.10

package/dist/MentionInput.js

@@ -93,11 +93,6 @@ var MentionInput = function (_a) {
     var renderSuggestions = function () {
         if (!showSuggestions || !inputRef.current)
             return null;
-        var inputRect = inputRef.current.getBoundingClientRect();
-        var styles = {
-            position: 'absolute',
-            zIndex: 1000,
-        };
         var getInitials = function (name) {
             var nameParts = name.split(" ");
             var initials = nameParts
@@ -106,6 +101,11 @@ var MentionInput = function (_a) {
                 .join("");
             return initials;
         };
+        var inputRect = inputRef.current.getBoundingClientRect();
+        var styles = {
+            position: 'absolute',
+            zIndex: 1000,
+        };
         // Use suggestionPosition prop to adjust tooltip position
         switch (suggestionPosition) {
             case 'top':
@@ -184,7 +184,8 @@ var MentionInput = function (_a) {
     };
     return (React.createElement("div", { className: "mention-container ".concat(containerClassName || "") },
         React.createElement("div", { className: "mention-input-container ".concat(inputContainerClassName || "") },
-            React.createElement("div", { ref: inputRef, contentEditable: true, suppressContentEditableWarning: true, className: "mention-input ".concat(inputClassName || ""), onInput: handleInputChange, onKeyDown: handleKeyDown }, (!inputValue || !inputRef.current || ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.innerText.trim()) === "") ? (React.createElement("span", { className: "placeholder" }, placeholder)) : null),
+            (!inputValue || !inputRef.current || ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.innerText.trim()) === "") ? (React.createElement("span", { className: "placeholder" }, placeholder)) : null,
+            React.createElement("div", { ref: inputRef, contentEditable: true, suppressContentEditableWarning: true, className: "mention-input ".concat(inputClassName || ""), onInput: handleInputChange, onKeyDown: handleKeyDown }),
             React.createElement("button", { onClick: handleSendMessage, className: "send-button ".concat(sendBtnClassName || "") }, sendButtonIcon || "➤")),
         renderSuggestions()));
 };

package/package.json

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

package/src/MentionInput.tsx

@@ -145,12 +145,6 @@ const MentionInput: React.FC<MentionInputProps> = ({
   const renderSuggestions = () => {
     if (!showSuggestions || !inputRef.current) return null;
 
-    const inputRect = inputRef.current.getBoundingClientRect();
-    const styles: React.CSSProperties = {
-      position: 'absolute',
-      zIndex: 1000,
-    };
-
     const getInitials = (name: string) => {
       const nameParts = name.split(" ");
       const initials = nameParts
@@ -159,6 +153,12 @@ const MentionInput: React.FC<MentionInputProps> = ({
         .join("");
       return initials;
     };
+    
+    const inputRect = inputRef.current.getBoundingClientRect();
+    const styles: React.CSSProperties = {
+      position: 'absolute',
+      zIndex: 1000,
+    };
 
     // Use suggestionPosition prop to adjust tooltip position
     switch (suggestionPosition) {
@@ -273,10 +273,12 @@ const MentionInput: React.FC<MentionInputProps> = ({
   };
 
 
-
   return (
     <div className={`mention-container ${containerClassName || ""}`}>
       <div className={`mention-input-container ${inputContainerClassName || ""}`}>
+        {(!inputValue || !inputRef.current || inputRef.current?.innerText.trim() === "") ? (
+          <span className="placeholder">{placeholder}</span>
+        ) : null}
         <div
           ref={inputRef}
           contentEditable
@@ -285,9 +287,6 @@ const MentionInput: React.FC<MentionInputProps> = ({
           onInput={handleInputChange}
           onKeyDown={handleKeyDown} // Add keydown listener
         >
-          {(!inputValue || !inputRef.current || inputRef.current?.innerText.trim() === "") ? (
-          <span className="placeholder">{placeholder}</span>
-            ) : null}
         </div>
         <button
           onClick={handleSendMessage}