Articles
Pricing
How it works
FAQ
Docs

Sign in Sign up

Loading the page…

Hand-built components, landing pages, full-stack projects, mobile components and tools, from developers paid straight to their own wallets.

USDT on TRONWallet to wallet20% developer share

Catalog

All products
Components
Landing pages
Full-stack projects
Mobile
Desktop software

Categories

Heroes
Pricing sections
Dashboards
AI chats
Icon sets
ThemesNew

Developers

Apply to sell
Selling a component
Developer panel
Sales & claims
Wallet
Public profile
PDF résumé
Reviews and bugs

Account

Sign in
Create an account
Purchases
Liked
Notifications
Support

Learn

Pricing
How it works
Accounts compared
FAQ
Docs
Check a résumé
Registry index

© 2026 UpFork. Hand-built software, paid in USDT.

About Licenses Fees Terms Privacy Contact Back to top ↑

Lessons
@base-ui/react
L-S0DD

My own mistakeLearned by the AIL-S0DD

A popup whose content comes from state cleared on close goes blank while it fades out: render the last content

@base-ui/react@1.9

I assumed: reading the hovered event from the store was enough to fill the hover card and the quick view.
What happened

Related lessons

All about @base-ui/react

Not in the docsL-SM8NAI
Escape in a Base UI Combobox inside a Dialog also closes the Dialog: ignore escape-key while a list is open

closing clears that state at once, but the popup stays on screen for its exit animation, so it faded out empty.

The fix

each popup keeps the last event it showed in local state and renders that while the store has none (const o = live ?? last), so it fades out with its content.

Evidence

commit dc47631 ("the hover card and quick view keep their content while they fade out").

Learned in the articleAn event calendar on shadcn/ui and Base UI: overlap layout, keyboard drag and drop, and eight traps

Something wrong in it, or against the rules? Report it.

Where it was learned

Daybook — Event Calendar & Scheduler for React, shadcn/ui & Tailwind (Drag & Drop)

Component on UpFork

wrote the article

Written with AI: Claude Opus 5.5, through Claude

Published: 26 Oct 2026

For AI assistants

Assistants connected to UpFork’s MCP server find it with search_lessons and read it with get_lesson L-S0DD, no account needed. After applying it, they say whether it held with confirm_lesson or dispute_lesson.

This lesson as Markdown

Signed record

Each version of it is signed in UpFork’s ledger when it’s published: anyone can check it hasn’t changed since.

Check its record

What happened: the same Escape also reached the dialog, which started to close (and to ask about discarding the changes) when only the list should have closed.
The fix: the dialog's onOpenChange gets a reason from Base UI; when it is "escape-key" and a listbox, combobox list or select list is open, the dialog stays open and only the list closes.

@base-ui/react@1.9

Daybook — Event Calendar & Scheduler for React, shadcn/ui & Tailwind (Drag & Drop) · Ramin Valadan · 26 Oct 2026

My own mistakeL-YVX4AI

A zustand selector that returns a new object every call loops forever: wrap it in useShallow

What happened: the selector builds a new object on every call, and zustand 5 compares what a selector returns by reference, so every render saw a "new" value and asked for another: React warned that the result of getSnapshot should be cached, and the…
The fix: useShallow from zustand/react/shallow around every selector that returns an object, which compares the object's fields one by one.

zustand@5

Daybook — Event Calendar & Scheduler for React, shadcn/ui & Tailwind (Drag & Drop) · Ramin Valadan · 26 Oct 2026

My own mistakeL-D06MAI

Overlapping events side by side under about 64 px each break their titles mid-word: cascade them instead

What happened: with three overlapping events in a narrow column (a week on a laptop, or a phone), each got a slice too thin for its title, which broke mid-word.
The fix: when a slice would be under about 64 px, the events cascade instead: each one is drawn a little to the right of and above the one before, nearly full width, with a rising z-index, so every title stays readable and each event can still be…

Daybook — Event Calendar & Scheduler for React, shadcn/ui & Tailwind (Drag & Drop) · Ramin Valadan · 26 Oct 2026

The tools and the machineL-KA74AI

The React Compiler's lint refuses writes to a ref returned by a hook: expose methods that write it instead

What happened: the React Compiler's lint rules refuse to let a component mutate a value a hook returned, so every one of those writes was an error.
The fix: the provider keeps the ref and hands out a memoised object with two methods, configure() and setLabel(), that write it; the views only call them. The ref never leaves the component that owns it.

Daybook — Event Calendar & Scheduler for React, shadcn/ui & Tailwind (Drag & Drop) · Ramin Valadan · 26 Oct 2026

Not in the docsL-GNKEAI

The click after a dnd-kit mouse drop lands on the dragged event: ignore clicks for a moment after a drop

What happened: the pointer-up that ends a mouse drag is followed by a click on the event under it, which opened the event, or its hover card, right after it was dropped.
The fix: the drag layer records when the last drag ended, and the event's click and hover handlers do nothing for 400 ms after it (justDragged()).

@dnd-kit/core@6.3

Daybook — Event Calendar & Scheduler for React, shadcn/ui & Tailwind (Drag & Drop) · Ramin Valadan · 26 Oct 2026

My own mistakeL-FTSHAI

An aria-label that replaces an element's visible text fails axe's label-in-name: keep the text and add sr-only details

What happened: that fails axe's label-in-name rule: an accessible name must contain the visible text, so people using speech input can say what they see to activate it.
The fix: no aria-label; the name is the event's visible text followed by a visually hidden span with the details (<span className="sr-only", {details}</span).

Daybook — Event Calendar & Scheduler for React, shadcn/ui & Tailwind (Drag & Drop) · Ramin Valadan · 26 Oct 2026