@monolith-forensics/monolith-ui 1.3.92 → 1.3.94

package/dist/SearchableTextArea/SearchableTextArea.js

@@ -17,20 +17,45 @@ const TextAreaRow = styled.div `
   display: flex;
   align-items: flex-start;
   width: 100%;
+  z-index: 1; /* Lower than SelectBoxWrapper */
 `;
 const SelectBoxWrapper = styled.div `
-  position: relative;
+  position: absolute;
   width: 100%;
+  top: 0; /* Position at the top of the textarea */
+  left: 0;
+  z-index: 10; /* Ensure dropdown appears above textarea */
 `;
 const StyledSelectBox = styled(SelectBox) `
-  /* Completely hide the SelectBox but keep it functional for dropdown */
-  position: absolute;
-  top: 0;
-  left: 0;
+  /* Completely hide the SelectBox and disable all interactions */
+  position: relative;
   width: 100%;
   opacity: 0;
-  pointer-events: auto; /* Allow interactions for dropdown */
-  z-index: -1;
+  pointer-events: none; /* Disable all interactions */
+  height: 0;
+  overflow: hidden;
+  
+  /* Hide all child elements */
+  * {
+    opacity: 0;
+    pointer-events: none;
+    height: 0;
+    overflow: hidden;
+  }
+  
+  /* Only allow dropdown portal to be visible and interactive when opened programmatically */
+  [data-floating-ui-portal] {
+    opacity: 1 !important;
+    pointer-events: auto !important;
+    z-index: 1000 !important;
+    
+    * {
+      opacity: 1 !important;
+      pointer-events: auto !important;
+      height: auto !important;
+      overflow: visible !important;
+    }
+  }
 `;
 const StyledFieldLabel = styled(FieldLabel) `
   .action-section {
@@ -108,20 +133,23 @@ function SearchableTextArea({ label, data, searchable, allowCustomValue, require
             onChange(newValue);
         }
     };
-    // Handle keyboard shortcuts for dropdown
-    const handleTextAreaKeyDown = (event) => {
-        // Ctrl/Cmd + Space to open dropdown
-        if ((event.ctrlKey || event.metaKey) && event.code === "Space") {
-            event.preventDefault();
-            handleSearchClick();
-        }
-    };
+    // Removed keyboard shortcuts - textarea behaves normally
     const handleSearchClick = () => {
         if (selectBoxRef.current) {
             const selectInput = selectBoxRef.current.querySelector("input");
             if (selectInput) {
+                // Temporarily enable interactions to trigger dropdown
+                selectInput.style.pointerEvents = "auto";
+                selectInput.style.opacity = "1";
+                selectInput.style.height = "auto";
                 selectInput.focus();
                 selectInput.click();
+                // Hide again immediately after triggering
+                setTimeout(() => {
+                    selectInput.style.pointerEvents = "none";
+                    selectInput.style.opacity = "0";
+                    selectInput.style.height = "0";
+                }, 50);
             }
         }
     };
@@ -147,7 +175,7 @@ function SearchableTextArea({ label, data, searchable, allowCustomValue, require
                             height: "16px",
                             width: "16px",
                         },
-                    }, children: _jsx(MoreHorizontal, { size: 16 }) }), children: label })), _jsx(TextAreaRow, { children: _jsx(StyledTextArea, Object.assign({ placeholder: textAreaPlaceholder || "Enter details about the move", "$minRows": textAreaMinRows, "$maxRows": textAreaMaxRows, "$hasError": hasError, value: textAreaValue, onChange: handleTextAreaChange, onKeyDown: handleTextAreaKeyDown }, textAreaProps)) }), _jsx(SelectBoxWrapper, { ref: selectBoxRef, children: _jsx(StyledSelectBox, Object.assign({ data: data, searchable: searchable, allowCustomValue: allowCustomValue, arrow: false, value: selectValue || undefined, onChange: handleSelectChange, hasError: hasError }, selectProps), selectKey) })] }));
+                    }, children: _jsx(MoreHorizontal, { size: 16 }) }), children: label })), _jsxs(TextAreaRow, { children: [_jsx(StyledTextArea, Object.assign({ placeholder: textAreaPlaceholder || "Enter details about the move", "$minRows": textAreaMinRows, "$maxRows": textAreaMaxRows, "$hasError": hasError, value: textAreaValue, onChange: handleTextAreaChange }, textAreaProps)), _jsx(SelectBoxWrapper, { ref: selectBoxRef, children: _jsx(StyledSelectBox, Object.assign({ data: data, searchable: searchable, allowCustomValue: allowCustomValue, arrow: false, value: selectValue || undefined, onChange: handleSelectChange, hasError: hasError }, selectProps), selectKey) })] })] }));
 }
 SearchableTextArea.displayName = "SearchableTextArea";
 export default SearchableTextArea;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.3.92",
+  "version": "1.3.94",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",