`NSBrowser` inside `NSViewRepresentable`

Question

Created Mar ’22

Replies 1

Boosts 0

Participants 2

I would like to use an NSBrowser in a MacOS app that is SwiftUI based. To that end, I created a view that implements NSViewRepresentable. My protocol methods are super basic:

   func makeNSView(context: Context) -> NSBrowser {
        let browser = NSBrowser()
        browser.delegate = context.coordinator
        return browser
    }

    func updateNSView(_ nsView: NSBrowser, 
       context: NSViewRepresentableContext<RoomBrowser>) {
    }

The problem I am having is that the NSBrowser doesn't grow to fill the frame of the hosting View. The width seems fine, but the height is wrong.

Looking at the view debugger in Xcode, I can see the there is a "Host View" which is 22 points tall and the NSBrowser is has layout constraints so the height of the browser matches the height of the "Host View".

If I try to resize the window (which hugs the content pretty tightly) I can make the window a little smaller, but it will not drag larger.

How can I change the size of the host view to manipulate the size of the NSBrowser?

Boost

Answer 1

TacoVollmer OP

May ’23

I had the same issue and found that if you wrap the NSBrowser instance in a container NSView and set its layout constraints to match the container's bounds, the NSBrowser takes on the correct size:

 public func makeNSView(context: Context) -> NSView {
    let browser = NSBrowser()
    browser.delegate = context.coordinator

    let container = NSView()
    container.addSubview(browser)

    browser.translatesAutoresizingMaskIntoConstraints = false
    NSLayoutConstraint.activate([
      browser.topAnchor.constraint(equalTo: container.topAnchor),
      browser.leadingAnchor.constraint(equalTo: container.leadingAnchor),
      browser.trailingAnchor.constraint(equalTo: container.trailingAnchor),
      browser.bottomAnchor.constraint(equalTo: container.bottomAnchor)
    ])

    return container
  }

0