{"uid":"cap_u6823vrWlunqAj0bIdI3I","slug":"tenjin-base-ui-dialogs-initial-focus-article-609f065f","name":"Tenjin: Base UI Dialogs Initial Focus Article","description":"Base UI dialogs: owning initial focus in view-switching and deep-linked dialogs. Answers: why effect-based focus() loses to @base-ui/react Dialog's initial focus on open, the initialFocus callback pattern that fixes it, what to focus for deep-linked views, and how to test it non-vacuously in jsdom. As of 2026-08-14, @base-ui/react 1.6, React 19.2.","url":"https://tenjin.blog/api/read/0xe4c16d163d80fd972e6e1e9b94bc71c5fbe5a9c5/base-ui-dialogs-owning-initial-focus-in-view-switching-and-deep-linked-dialogs?utm_source=zero.xyz","method":"GET","headers":{},"bodySchema":{"type":"object","$schema":"https://json-schema.org/draft/2020-12/schema","required":["input"],"properties":{"input":{"type":"object","required":["type","method"],"properties":{"type":{"type":"string","const":"http"},"method":{"enum":["GET"],"type":"string"},"pathParams":{"type":"object","required":["handle","slug"],"properties":{"slug":{"type":"string","description":"The article's URL slug, unique per creator. The reserved slug `latest` resolves to the creator's newest published piece; its stable scheduled-read form is the wallet-address URL /api/read/<0x-address>/latest (a handle `latest` is not payable)."},"handle":{"type":"string","description":"The creator's handle, or their wallet address. The address form is REQUIRED for a durable `latest` alias (a handle `latest` is not payable), and is the only form for an unclaimed creator."}}},"queryParams":{"type":"object","required":[],"properties":{},"additionalProperties":false}},"additionalProperties":false},"output":{"type":"object","required":["type"],"properties":{"type":{"type":"string"},"example":{"type":"object"}}}}},"responseSchema":null,"example":null,"exampleRequest":null,"tags":["x402"],"displayCostAmount":"0.01","displayCostAsset":"USDC","priceDynamic":false,"priceHint":null,"priceStatus":"priced","priceSource":"probe","requiresHandshake":false,"reviewCount":0,"rating":{"score":"0.00","successRate":"0.00","reviews":0,"stars":null,"state":"unrated"},"availabilityStatus":"unknown","priceObserved":null,"sessionDeposit":null,"pricing":{"kind":"static","summary":"$0.01/call","primary":{"kind":"static","protocol":"x402","network":"base","amountUsd":"0.01","per":"call","confidence":"exact"},"accepted":[{"kind":"static","protocol":"x402","network":"base","amountUsd":"0.01","per":"call","confidence":"exact"}]},"paymentMethods":[{"uid":"pm_LClRHOifXkAx-LzhgvVcw","protocol":"x402","methodType":"crypto","chain":"base","mode":"charge","costAmount":"0.01","costPer":"request","priority":0,"asset":"0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913","unit":"request","depositMicros":null,"planRef":null}],"brandName":null,"brandSlug":null,"brandBaseUrl":null,"brandDocsUrl":null,"whatItDoes":"Returns the full text of a Tenjin article explaining how to own initial focus in view-switching and deep-linked dialogs using @base-ui/react 1.6 and React 19.2","exampleAgentPrompt":"Pull up the Tenjin article about owning initial focus in base-ui dialogs — specifically why effect-based focus() gets overridden and how the initialFocus callback fixes it for deep-linked views.","exampleUseCases":[{"title":"Debugging focus override in base-ui","prompt":"I'm building a React 19 app with @base-ui/react dialogs and my effect-based focus() calls keep getting ignored when the dialog opens — fetch me the Tenjin piece that explains why this happens and how the initialFocus callback pattern solves it."},{"title":"Deep-linked dialog accessibility fix","prompt":"My app has deep-linked routes that open dialogs and I don't know what element should receive focus on load — get me the Tenjin article about owning initial focus in view-switching and deep-linked dialogs so I can figure out the right approach."},{"title":"Non-vacuous focus testing in jsdom","prompt":"I need to write meaningful focus tests for my base-ui Dialog in jsdom but they all pass vacuously — find the Tenjin article covering how to test initial focus behavior non-vacuously in jsdom with React 19.2 and @base-ui/react 1.6."}],"resultDescription":"The full article content explaining the mechanics of initial focus in @base-ui/react Dialog (version 1.6, React 19.2), including why effect-based focus() calls lose to the library's built-in focus management, the initialFocus callback pattern that correctly overrides it, guidance on which element to focus for deep-linked views, and testing strategies for jsdom environments.","failureModes":["Article not found if slug or wallet address is incorrect (404)","Payment not processed due to insufficient USDC balance (402)","Network timeout if Tenjin platform is unavailable","Article may be unpublished or access-restricted"],"whenToPreferThis":"Choose this endpoint when you need authoritative, up-to-date guidance on @base-ui/react Dialog focus management as of 2026-08-14, specifically covering the initialFocus callback pattern, deep-linked view focus decisions, and jsdom testing. Prefer over generic documentation searches when you want a curated, structured article with concrete solutions.","instructions":null,"reviewSummary":null,"reviewSummaryHighlights":null,"reviewSummaryConcerns":null,"reviewSummaryGeneratedAt":null,"activationCount":0,"lastUsedAt":null,"lastSuccessfullyRanAt":null,"lastHealthCheckAt":"2026-10-15T12:34:08.240Z","isFirstParty":false,"canonicalSlug":"tenjin-base-ui-dialogs-initial-focus-article-609f065f"}