macOS: the BottomSheet comes out from the top and cannot display its content

[WalterZou]

Describe the bug
In macOS, the BottomSheet comes out from the top and cannot display its content

Minimal reproduce-able code

@State private var bottomSheetPosition: BottomSheetPosition = .hidden
...
 .bottomSheet(bottomSheetPosition: $bottomSheetPosition, switchablePositions: [.relativeBottom(0.5), .relativeBottom(0.95)], title: $sheetViewName.wrappedValue) {
            VStack {
                switch sheetViewName {
                case "Prompts":
                    Prompts()
                case "ChatHistory":
                    ChatHistory()
                default:
                    Settings()
                }
            }
        }
        .sheetWidth(.relative(100))

Expected behavior
The BottomSheet should come out from the bottom, and the mainContent should be displayed

Screenshots

Target version

• Environment: macOS
• Version: 3.1.1

Additional context
Please provide additional information about the issue at hand

[lucaszischka]

Hello @WalterZou,
I can indeed reproduce your issue; for some reason the BottomSheet is beneath the Window Menu (Top) at launch. If you drag it, it fixes itself.
I have no idea why this happens and I can't remember that this ever occurred to me before. However im also Beta, this could be the reason; are you on Xcode beta as well?

[GerdC]

"If you drag it, it fixes itself": I don't know this specific problem, but I have several cases in my code, where the first rendering uses some defaults and later when you change something, it fixes itself.

Workaround: you change some parameter (almost any parameter) .onAppear, that influences the layout.

unrelated example:

struct CheckCellModifier: ViewModifier {
    
    @State var changeHeight: Bool = true
    
    func body(content: Content) -> some View {
        content
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: changeHeight ? 10 : .infinity)
            .background(Color(.secondarySystemGroupedBackground))
            .cornerRadius(10)
            .onAppear {
                changeHeight = false
            }
    }
}

[lucaszischka]

Thank you for your reply @GerdC.
With my current information, I'm guessing that the issue has to be here, in BottomSheetView+Calculations at line 47. I think that the mainMenu is nil for some reason on startup. Furthermore it does not seem to publish a view update as soon as it contains the correct value and therefore it fixes itself only if you update the view otherwise (eg. your onAppear Solution, or my "dragging it" Solution).

However, I would have most likely found this issue at the time of writing this line, if it had existed at this time. Therefore im not sure what change caused it to break; in particular, what happened that this value is nil. So, I would like to ask again if you are using macOS/Xcode Developer/Public Beta as well, as im sill thinking this is the most plausible reason?

[webcpu]

BottomSheetConfiguration.swift
var iPadFloatingSheet: Bool = true

This is the bug. The default value of iPadFloatingSheet should be false.
You might have to use the modifier .sheetWidth(.relative(100)) to change the width as well.

[lucaszischka]

Hey @WalterZou think there was a misunderstanding.

BottomSheet not on the bottom

iPad

I decided on purpose to use a floating sheet on iPad, because this the way Apple was doing it in Apple Maps:

As you can see the Bottom sheet was floating in the top right; however Apple changed this behaviour (at least) as of iOS 17:

As there have already have been many people in the past requesting the same behaviour like on iPhone, including myself, I added .enableFloatingIPadSheet(Bool). At the time I tried to mimic apples BottomSheet as close as possible, so I decided to make it true by default. To not break backwards compatibility, I will not change this behaviour in V3.

Mac

On Mac, Apple doesn't use a BottomSheet, as this is a touch-focused Component. However, I decided to bring this component to MacOS anyway, to make it easier for cross platform developer. This doesn't meant that is is a good idea to use a BottomSheet on MacOS. I think it is currently not possible to make the BottomSheet on MacOS behave the same way like on iPhone (dragging from the bottom up), but im not sure (haven't used it on MacOS in a while and I don't have time right now to test it). Please just try if you can combine the ViewModifers specified in the README to get it work. Maybe .enableFloatingIPadSheet(Bool) + .sheetWidth(.relative(100)), as suggested by @webcpu does the Job.

MainContent not displaying

/// The state where only the headerContent is visible.
/// The height of the BottomSheet is x%.
/// Only values between 0 and 1 make sense.
/// Instead of 0 please use `.hidden`.
case relativeBottom(CGFloat)

Please read the README for more information.

---

What I was referring to

In your Screenshot, the title is not visible, because it is behind the mainMenu. I have code that accounts for this, but it didn't not seem to work:

I can indeed reproduce your issue; for some reason the BottomSheet is beneath the Window Menu (Top) at launch. If you drag it, it fixes itself.

After @GerdC told me that it also fixes itself by getting the view to re-render, by updating any other view component, I was guessing that is had something to do with the view updates not firing:

With my current information, I'm guessing that the issue has to be here, in BottomSheetView+Calculations at line 47. I think that the mainMenu is nil for some reason on startup. Furthermore it does not seem to publish a view update as soon as it contains the correct value and therefore it fixes itself only if you update the view otherwise (eg. your onAppear Solution, or my "dragging it" Solution).

At this time I was using a beta and during development I never encountered this issue (and I did extensive testing), so I guessed that this was just a Beta Bug. I did not had the time jet to try it again on the current Xcode version.

Conclusion

The "bug" itself

Describe the bug
In macOS, the BottomSheet comes out from the top and cannot display its content

is expected behaviour., but the title being beneath the mainMenu is not expected.

As soon as I have time I will look into it.

[AballahNsour]

I am also facing same kind of issue but in iOS the sheets fly down from the top of the screen down to the bottom