Drawer with no close or return path

Problem Context

• A side drawer, inspector, side sheet, mobile full-screen drawer, or navigation drawer opens over or beside the current page.
• The surface is temporary, contextual, or responsive rather than a permanent workspace pane.
• Users need to return to a specific row, card, filter result, map marker, chart point, or navigation trigger after closing.
• The drawer may include dirty fields, selected-object switching, scrim dismissal, browser back handling, or narrow viewport layout changes.

Selection Rules

• Flag this anti-pattern when a temporary drawer has no visible close control, no Escape path, no back-route dismissal, no equivalent for gesture-only close, or no predictable focus return.
• Flag it when the drawer closes but loses the selected object, scroll position, active filter, draft text, route state, or opener focus.
• Use a standard drawer when the panel is temporary supplemental content with explicit close and return behavior.
• Use a details panel when the content is persistent workspace layout and close is not part of the contract.
• Use a modal dialog when background interaction must be blocked and focus must be contained until users complete or cancel the task.
• Use navigation drawer when the panel changes destinations; still provide dismissal, selected destination state, and focus recovery.
• Use a full page when the drawer needs long editing, history, shareable URL state, or complex return management.
• If unsaved work blocks immediate close, show a discard or save decision rather than trapping users by removing dismissal.

Required States

• Closed state with a clear opener and remembered return target.
• Open state with selected-object title, labelled close button, and visible relationship to the originating context.
• Keyboard dismissal state where Escape closes or opens a scoped discard review.
• Browser back or route dismissal state that closes the drawer without losing page context.
• Scrim or outside-click state where temporary modal drawers either dismiss predictably or explain why dismissal is blocked.
• Focus return state where close restores focus to the opener, selected row, or next logical object.
• Object-switching state where the return target updates when selection changes.
• Dirty-edit state where closing asks whether to keep editing, discard, or save.
• Mobile or narrow viewport state with a visible Back or Close route and preserved list/filter context.
• Bad state showing missing close, missing Escape, lost focus, lost page state, gesture-only close, and no mobile return.

Interaction Contract

• Opening the drawer records the opener or selected object as the return target.
• The drawer exposes a labelled close control that remains reachable at the top or in a persistent action area.
• Escape closes dismissible drawers or moves focus into a scoped discard review when dirty state exists.
• Browser back, route changes, scrim clicks, close button, and programmatic close use the same cleanup path.
• Closing preserves filters, selected row, scroll position, draft inputs, and object context unless users explicitly discard them.
• Focus returns to the opener, selected row, active marker, or next logical object rather than the document start.
• Responsive full-screen drawers include a visible Back or Close path and restore the previous layout context.
• Gesture close has pointer, keyboard, and assistive-technology equivalents.
• If close is intentionally blocked during a commit, the drawer explains the temporary lock and re-enables close when safe.

Implementation Checklist

• Inventory every drawer, side sheet, inspector, and mobile drawer that can open temporarily.
• Identify the opener, selected object, route state, filter state, scroll position, and focus target to restore.
• Add a labelled close control in a stable header or sticky action area.
• Implement Escape dismissal or a dirty-state discard review.
• Handle browser back, route changes, scrim click, outside click, close button, and object switch through one close routine.
• Return focus to the current selected object or opener after every dismissal path.
• Preserve underlying page state unless the user explicitly changes or discards it.
• Provide mobile Back or Close controls when the drawer becomes full-screen.
• Test keyboard-only, touch, screen reader, high zoom, route/back, dirty edits, object switching, and repeated open-close cycles.

Common Generated-UI Mistakes

• Hiding close in an overflow menu or offscreen toolbar.
• Relying on swipe-only dismissal for mobile drawers.
• Letting Escape do nothing because the drawer was implemented as a plain div.
• Closing the drawer while focus moves to the page header or disappears.
• Clearing filters or selected rows when the drawer closes.
• Treating browser back as page navigation instead of first closing the temporary drawer.
• Blocking close during unsaved work without offering Keep editing, Discard, or Save choices.

Critique Questions

• What exact element receives focus after each close route?
• Can pointer, keyboard, touch, screen reader, and route/back users all leave the drawer?
• Does the drawer preserve the row, filter, scroll, and draft state that existed before opening?
• What happens if the selected object changes while the drawer is open?
• What happens when the drawer is full-screen on mobile or at high zoom?
• Is close blocked because of dirty state, or because no dismissal contract was designed?