21.9 C
Canberra
Tuesday, February 10, 2026

SwiftUI TabView (.web page / PageTabViewStyle) choice can get out of sync when consumer interrupts a programmatic web page change


SwiftUI TabView with .web page type appears to permit consumer interplay to interrupt an in-flight web page transition, leaving the UI in an inconsistent state.

Anticipated: the seen web page at all times matches the sure choice.
Noticed: if the consumer faucets/drags the pager throughout a programmatic web page change, the sure choice updates, however the seen web page can stay the earlier one. After that, subsequent web page modifications can “leap” (e.g. two pages at a time), as a result of the visible web page and choice have diverged.

Here’s a GIF exhibiting the difficulty:

SwiftUI TabView (.web page / PageTabViewStyle) choice can get out of sync when consumer interrupts a programmatic web page change

Within the GIF, I begin with choice = 5 and web page “Web page 5” seen. I faucet Prev after which work together with the pager mid-transition. The seen web page stays “Web page 5”, however the mannequin has up to date (choice = 4). Tapping Prev once more then animates two pages to achieve “Web page 3”, which suggests the pager’s inside state is now out of sync with the binding.

Repro steps:

  1. Run the minimal reproducible instance under.
  2. Faucet Prev or Subsequent to vary choice.
  3. Whereas the web page transition remains to be in progress, rapidly faucet/drag on the pager.
  4. Observe that choice modifications however the seen web page generally doesn’t.

Minimal reproducible instance

struct Web page: View {
    let index: Int

    var physique: some View {
        ZStack {
            RoundedRectangle(cornerRadius: 24)
                .fill(Shade(white: 0.92))
                .padding(24)

            Textual content("Web page (index)")
                .font(.system(measurement: 48, weight: .daring, design: .rounded))
        }
    }
}

struct PagerDesyncReproView: View {
    @State personal var choice: Int = 0
    personal let pageCount = 6

    var physique: some View {
        VStack(spacing: 0) {
            HStack(spacing: 12) {
                Button("Prev") {
                    guard choice > 0 else { return }
                    choice -= 1
                }
                .buttonStyle(.bordered)

                Button("Subsequent") {
                    guard choice < pageCount - 1 else { return }
                    choice += 1
                }
                .buttonStyle(.borderedProminent)

                Spacer()

                Textual content("choice = (choice)")
                    .font(.system(.caption, design: .monospaced))
                    .foregroundStyle(.secondary)
            }
            .padding(.horizontal)

            TabView(choice: $choice) {
                ForEach(0..<pageCount, id: .self) { i in
                    Web page(index: i)
                        .tag(i)
                }
            }
            .animation(.default, worth: choice)
            .transition(.slide)
            .tabViewStyle(.web page(indexDisplayMode: .at all times))
            .body(maxWidth: .infinity, maxHeight: .infinity)
        }
    }
}

Is there a supported option to stop this desynchronization (e.g. disable interplay till the web page transition completes), or to detect cancellation/completion of the web page transition so the binding might be stored constant?

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

[td_block_social_counter facebook="tagdiv" twitter="tagdivofficial" youtube="tagdiv" style="style8 td-social-boxed td-social-font-icons" tdc_css="eyJhbGwiOnsibWFyZ2luLWJvdHRvbSI6IjM4IiwiZGlzcGxheSI6IiJ9LCJwb3J0cmFpdCI6eyJtYXJnaW4tYm90dG9tIjoiMzAiLCJkaXNwbGF5IjoiIn0sInBvcnRyYWl0X21heF93aWR0aCI6MTAxOCwicG9ydHJhaXRfbWluX3dpZHRoIjo3Njh9" custom_title="Stay Connected" block_template_id="td_block_template_8" f_header_font_family="712" f_header_font_transform="uppercase" f_header_font_weight="500" f_header_font_size="17" border_color="#dd3333"]
- Advertisement -spot_img

Latest Articles