[TextNode] fix user interaction bug

for text view, the user interaction should be updated based on selectable and editable status
the overlay text on the buttons exposed the issue

Author: honghaoz

ComposeUI/Sources/ComposeUI/ComposeNodes/TextNode.swift

@@ -347,6 +347,16 @@ public struct TextNode: ComposeNode, IntrinsicSizableComposeNode {
     textView.isEditable = isEditable
     #endif
     textView.isSelectable = isSelectable
+
+    let isInteractive = isSelectable || isEditable
+
+    #if canImport(AppKit)
+    textView.ignoreHitTest = !isInteractive
+    #endif
+
+    #if canImport(UIKit)
+    textView.isUserInteractionEnabled = isInteractive
+    #endif
   }
 
   // MARK: - Public

ComposeUI/Tests/ComposeUITests/ComposeNodes/LabelNodeTests.swift

@@ -372,6 +372,49 @@ class LabelNodeTests: XCTestCase {
     expect(textView?.lineBreakMode) == .byTruncatingTail
   }
 
+  // MARK: - User Interaction
+
+  func test_userInteraction() {
+    var textView: BaseTextView?
+    let view = ComposeView {
+      LabelNode("Hello World")
+        .onInsert { renderable, _ in
+          textView = renderable.view as? BaseTextView
+        }
+    }
+
+    view.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
+    view.refresh()
+
+    // by default, the label is not interactive
+    expect(textView?.isSelectable) == false
+    #if canImport(AppKit)
+    expect(textView?.ignoreHitTest) == true
+    #endif
+    #if canImport(UIKit)
+    expect(textView?.isUserInteractionEnabled) == false
+    #endif
+
+    // when set to selectable
+    view.setContent {
+      LabelNode("Hello World")
+        .selectable()
+        .onInsert { renderable, _ in
+          textView = renderable.view as? BaseTextView
+        }
+    }
+    view.refresh()
+
+    // the label is now interactive
+    expect(textView?.isSelectable) == true
+    #if canImport(AppKit)
+    expect(textView?.ignoreHitTest) == false
+    #endif
+    #if canImport(UIKit)
+    expect(textView?.isUserInteractionEnabled) == true
+    #endif
+  }
+
   // MARK: - Modifiers
 
   func test_modifiers() throws {
@@ -417,6 +460,13 @@ class LabelNodeTests: XCTestCase {
     expect(paragraphStyle.lineBreakMode) == .byWordWrapping
     expect(textView?.lineBreakMode) == .byTruncatingMiddle
     expect(textView?.isSelectable) == true
+
+    #if canImport(AppKit)
+    expect(textView?.ignoreHitTest) == false
+    #endif
+    #if canImport(UIKit)
+    expect(textView?.isUserInteractionEnabled) == true
+    #endif
   }
 
   func test_modifiers_resetNode() throws {

ComposeUI/Tests/ComposeUITests/ComposeNodes/TextNodeTests.swift

@@ -110,6 +110,13 @@ class TextNodeTests: XCTestCase {
     #endif
     expect(textView?.isSelectable) == true
 
+    #if canImport(AppKit)
+    expect(textView?.ignoreHitTest) == false
+    #endif
+    #if canImport(UIKit)
+    expect(textView?.isUserInteractionEnabled) == true
+    #endif
+
     contentView.setContent {
       TextNode("Hello, world!")
         .selectable(false)
@@ -125,6 +132,13 @@ class TextNodeTests: XCTestCase {
     #endif
     expect(textView?.isSelectable) == false
 
+    #if canImport(AppKit)
+    expect(textView?.ignoreHitTest) == true
+    #endif
+    #if canImport(UIKit)
+    expect(textView?.isUserInteractionEnabled) == false
+    #endif
+
     contentView.setContent {
       TextNode("Hello, world!")
         .selectable()
@@ -140,6 +154,13 @@ class TextNodeTests: XCTestCase {
     #endif
     expect(textView?.isSelectable) == true
 
+    #if canImport(AppKit)
+    expect(textView?.ignoreHitTest) == false
+    #endif
+    #if canImport(UIKit)
+    expect(textView?.isUserInteractionEnabled) == true
+    #endif
+
     contentView.setContent {
       TextNode("Hello, world!")
         .textContainerInset(horizontal: 10, vertical: 20)

playgrounds/ComposeUIPlayground-iOS/ComposeUIPlayground-iOS/ViewController.swift

@@ -112,11 +112,20 @@ class ViewController: UIViewController {
         case .normal,
              .hovered:
           ColorNode(Colors.blueGray)
+            .overlay {
+              Label("Button").textColor(.white)
+            }
         case .pressed,
              .selected:
           ColorNode(Colors.darkBlueGray)
+            .overlay {
+              Label("Button").textColor(.white)
+            }
         case .disabled:
           ColorNode(Colors.lightBlueGray)
+            .overlay {
+              Label("Button").textColor(.white)
+            }
         }
       } onTap: { [weak self] in
         self?.changeColor()
@@ -138,11 +147,20 @@ class ViewController: UIViewController {
             case .normal,
                  .hovered:
               ColorNode(Colors.blueGray)
+                .overlay {
+                  Label("Button").textColor(.white)
+                }
             case .pressed,
                  .selected:
               ColorNode(Colors.darkBlueGray)
+                .overlay {
+                  Label("Button").textColor(.white)
+                }
             case .disabled:
               ColorNode(Colors.lightBlueGray)
+                .overlay {
+                  Label("Button").textColor(.white)
+                }
             }
           } onTap: { [weak self] in
             self?.changeColor()