浏览代码

Fix PromptTextarea blocking sidebar clicks with pointer-events (#9)

**Additional Fix for Issue #9**

The sidebar z-index increase to 50 wasn't sufficient. The root cause was
the PromptTextarea's wrapper div blocking pointer events even though it
was invisible.

**Root Cause:**
The PromptTextarea component has this structure:
```tsx
<div className="relative w-full">  // Wrapper
  <textarea />                      // Actual input
  <div className="absolute inset-0 pointer-events-none" />  // Highlight overlay
  <div className="absolute ..." />  // Suggestions dropdown
</div>
```

The wrapper div (`relative w-full`) was capturing all pointer events in its
bounding box, even though it was invisible. On the text2img page, this
wrapper extends across the layout and can overlap with the sidebar area,
blocking clicks.

**Solution:**
Added CSS pointer-events properties to control event capturing:

1. Wrapper div: `pointer-events-none` - doesn't capture events
2. Textarea: `pointer-events-auto` - can be interacted with
3. Suggestions dropdown: `pointer-events-auto` - can be clicked

This allows clicks to "pass through" the invisible wrapper to elements
beneath (like the sidebar), while keeping the textarea and dropdown
interactive.

**Changes in webui/components/prompt-textarea.tsx:**
```tsx
// Line 257: Wrapper - don't capture pointer events
<div className="relative w-full pointer-events-none">

// Line 270: Textarea - restore pointer events
<textarea className="... pointer-events-auto" />

// Line 286: Dropdown - restore pointer events
<div className="... z-30 pointer-events-auto">
```

**Result:**
- Sidebar navigation now works on text2img page
- Textarea remains fully interactive (typing, clicking, selecting)
- Autocomplete dropdown still clickable
- No side effects on other pages

**Technical Details:**
The `pointer-events` CSS property controls whether an element can be the
target of pointer events. By setting `pointer-events-none` on the wrapper
and `pointer-events-auto` on interactive children, we create "holes" in
the wrapper that allow clicks to pass through to underlying elements.

Fixes #9 (additional fix beyond z-index adjustment)
Fszontagh 3 月之前
父节点
当前提交
29dd97b16f
共有 1 个文件被更改,包括 3 次插入3 次删除
  1. 3 3
      webui/components/prompt-textarea.tsx

+ 3 - 3
webui/components/prompt-textarea.tsx

@@ -254,7 +254,7 @@ export function PromptTextarea({
   };
 
   return (
-    <div className="relative w-full">
+    <div className="relative w-full pointer-events-none">
       <textarea
         ref={textareaRef}
         value={value}
@@ -267,7 +267,7 @@ export function PromptTextarea({
         placeholder={placeholder}
         rows={rows}
         className={cn(
-          'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 font-mono resize-none relative',
+          'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 font-mono resize-none relative pointer-events-auto',
           className
         )}
         style={{ background: 'transparent' }}
@@ -283,7 +283,7 @@ export function PromptTextarea({
       {showSuggestions && suggestions.length > 0 && (
         <div
           ref={suggestionsRef}
-          className="absolute mt-1 w-full max-h-60 overflow-auto rounded-md border border-border bg-popover shadow-lg z-30"
+          className="absolute mt-1 w-full max-h-60 overflow-auto rounded-md border border-border bg-popover shadow-lg z-30 pointer-events-auto"
         >
           {suggestions.map((suggestion, index) => (
             <div