Skip to content

fix(website): preserve showcase search input during IME composition (AI-assisted) - #12822

Open
d1vyom wants to merge 1 commit into
meta:mainfrom
d1vyom:fix/showcase-ime-composition
Open

d1vyom wants to merge 1 commit into
meta:mainfrom
d1vyom:fix/showcase-ime-composition

Conversation

@d1vyom

@d1vyom d1vyom commented Oct 30, 2026 •

Copy link
Copy Markdown

Pre-flight checklist

  • I have read the Contributing Guidelines on pull requests.
  • I have added automated tests to verify the changed behavior.
  • New API or substantial change: not applicable; this fixes the existing showcase search.

Motivation

Fixes #8701.

The showcase search updates the URL on every input event, including while an input method is composing text. This causes navigation before the user commits their text and can interrupt composition.

This change keeps the in-progress composition in local state and updates the existing URL-backed search value when composition ends. Ordinary typing still updates immediately, and URL-driven initialization and Clear All continue to work.

No new dependencies or public APIs are introduced.

Test Plan

Added three Playwright tests using the existing Chromium setup:

  • Native IME composition preserves the current URL until text is committed, then updates the search while preserving focus and tag filters.
  • Ordinary typing and clearing update the search immediately.
  • Clear All resets the displayed search value.

The IME regression test uses Chrome DevTools Protocol against the actual showcase page without mocking the search hook. It failed against the original implementation and passed after the fix.

Verification completed locally:

  • All three browser tests passed against both development and production builds.
  • Full test suite: 204 test files passed; 3,180 tests passed and one skipped.
  • Website TypeScript check passed.
  • English production build passed.
  • Full lint passed, including formatting and dependency checks.

Windows environment note: the unchanged baseline had four writeHeadingIds test failures because the checkout and temporary files were on different drives. The successful full-suite run used TEMP and TMP on the same drive as the checkout. No snapshots or unrelated source files were changed.

Test links

Showcase route for the deploy preview:
/showcase?name=React&tags=opensource

AI disclosure

(AI-assisted) Implementation, automated testing, and an independent agent review were prepared using AI tools. The submitting contributor is responsible for reviewing, understanding, and maintaining the change.

Summary by CodeRabbit

  • Bug Fixes
    • Search now handles input-method composition correctly, updating the URL after composition ends while preserving immediate updates for regular typing and clearing.
    • Clearing all filters resets both the search field and URL.

@meta-cla meta-cla Bot added the CLA Signed Signed Facebook CLA label Oct 30, 2026
@coderabbitai

coderabbitai Bot commented Oct 30, 2026 •

Copy link
Copy Markdown

Review in Change Stack →

No actionable comments were generated in the recent review.

Recent review info
Run configuration
  • Source mode: Auto
  • Repository: Unavailable
  • Branch: Unavailable
  • File: No configuration file from this repository applied
  • Commit: Unavailable
  • Layers: defaults
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: 4c2134cc-3086-4351-b4a1-cc31918ceb50
Commits

Reviewing files that changed from the base of the PR and between 6531677 and d6fa3bd.

Files selected for processing: 2
  • argos/tests/showcase.spec.ts
  • website/src/pages/showcase/_components/ShowcaseSearchBar/index.tsx

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.

Walkthrough

Showcase search now displays temporary IME composition text without changing the URL. When composition ends, the final input updates the search. Playwright tests cover this behavior, ordinary input, clearing the search, and clearing all filters.

Changes: Showcase IME Search

Layer / File(s) Summary
Composition handling and regression coverage
website/src/pages/showcase/_components/ShowcaseSearchBar/index.tsx, argos/tests/showcase.spec.ts
ShowcaseSearchBar displays temporary input during IME composition and saves the final value to searchName when composition ends. Playwright tests check composition behavior, URL updates for ordinary input and clearing, and the Clear All action.

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix · Severity of issue fixed: Medium

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant ShowcaseSearchBar
  participant ShowcaseURL
  User->>ShowcaseSearchBar: Enter composed text
  ShowcaseSearchBar-->>User: Display temporary composition
  User->>ShowcaseSearchBar: End composition
  ShowcaseSearchBar->>ShowcaseURL: Set searchName to final input
Loading
Merge Risk: Minimal · up to d6fa3

No merge-blocking risk was identified in the showcase search change.

Pre-merge checks: Passed 4 · Failed 1

Failed Failed checks: 1 warning

Check name Status Explanation Resolution
Docstring Coverage Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentat… Write docstrings for the functions missing them to satisfy the coverage threshold.
Passed Passed checks: 4 passed
Check name Status Explanation
Description Check Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check Passed The title clearly identifies the main change: preserving showcase search input during IME composition. It is concise, specific, and related to the changeset.
Linked Issues check Passed The change satisfies the coding requirement in issue #8701. ShowcaseSearchBar stores the composing value locally, displays it during composition, and updates the URL-backed searchName in `onCompos…
Out of Scope Changes check Passed The reviewed changes are limited to the showcase search component and targeted Playwright coverage. The component change directly fixes issue #8701. The tests validate the changed behavior and related…
Full details: Linked Issues check

Explanation

The change satisfies the coding requirement in issue #8701. ShowcaseSearchBar stores the composing value locally, displays it during composition, and updates the URL-backed searchName in onCompositionEnd. The added Playwright test verifies that candidate text appears, the URL stays unchanged during composition, the committed text updates the URL, focus remains, and tag filters remain. Additional tests verify immediate ordinary input, clearing, and Clear All behavior.

Full details: Out of Scope Changes check

Explanation

The reviewed changes are limited to the showcase search component and targeted Playwright coverage. The component change directly fixes issue #8701. The tests validate the changed behavior and related existing behavior. No unrelated production changes, dependencies, or public API changes are present.

Full details: Docstring Coverage

Explanation

Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentation-only edits and deletions within surviving functions are included; unchanged diff context and fully deleted functions are excluded. Analyzed 1 functions across 2 files.

Resolution

Write docstrings for the functions missing them to satisfy the coverage threshold.

Finishing Touches
🧪 Generate unit tests (beta)
  • Create a new PR
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Comment @coderabbitai help to get the list of available commands.

Copilot AI balanced review requested due to automatic review settings October 30, 2026 20:04

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has insufficient remaining quota. Try requesting a review at a lower effort level.

@netlify

netlify Bot commented Oct 30, 2026

Copy link
Copy Markdown

✅ [V2]

Built without sensitive environment variables

Name Link
🔨 Latest commit d6fa3bd
🔍 Latest deploy log https://app.netlify.com/projects/docusaurus-2/deploys/6ae4f838ea56a6f2bcb3b6c4
😎 Deploy Preview https://deploy-preview-12822--docusaurus-2.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed Signed Facebook CLA

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Could not use Chinese input method for searching on showcase

2 participants