feat: add clear button in search input by SahulKola · Pull Request #1895 · npmx-dev/npmx.dev

SahulKola · 2026-03-03T15:42:47Z

🔗 Linked issue

none

🧭 Context

📚 Description

vercel · 2026-03-03T15:42:53Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 5, 2026 4:04am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 5, 2026 4:04am
npmx-lunaria	Ignored		Mar 5, 2026 4:04am

coderabbitai · 2026-03-03T15:45:27Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: acfcf690-94a2-4149-a38a-1dc7ed3a121d

📥 Commits

Reviewing files that changed from the base of the PR and between 8bcbeed and fd2a652.

📒 Files selected for processing (1)

app/components/Header/SearchBox.vue

🚧 Files skipped from review as they are similar to previous changes (1)

app/components/Header/SearchBox.vue

📝 Walkthrough

Walkthrough

The Header SearchBox component adds a computed hasSearchQuery to detect a non-empty searchQuery, and a clearSearch method that resets searchQuery and focuses the input. A clear button (circle-x icon with an aria-label) is conditionally rendered via v-if="hasSearchQuery" and triggers clearSearch on click. InputBase styling receives additional end padding (pe-8) to accommodate the button. Focus exposure and existing focus behaviour remain unchanged.

Suggested reviewers

danielroe
alexdln
whitep4nth3r

🚥 Pre-merge checks | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	❓ Inconclusive	The PR description contains only scaffolded template sections with an image and no substantive text explaining the changes, context, or implementation details.	Add a detailed description explaining what the clear button feature does, why it was implemented, and how it improves the user experience, particularly for mobile users.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

codecov · 2026-03-03T15:48:07Z

Codecov Report

❌ Patch coverage is 25.00000% with 3 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/components/Header/SearchBox.vue	25.00%	3 Missing ⚠️

📢 Thoughts on this report? Let us know!

coderabbitai

Actionable comments posted: 1

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4d70dd8 and 2b9581d.

📒 Files selected for processing (1)

app/components/Header/SearchBox.vue

ghostdevv · 2026-03-05T02:58:44Z

thanks for the PR! will share in the Discord (message) to get some feedback 👀

It doesn't seem however to be a fix for #1881 which asked for a way to hide the close the search box on mobile. When you open the site if there is no text in the search box it's closed (hidden) on mobile by default. I updated your description and pr title to fix that

Co-authored-by: Nathan Knowler <nathan@knowler.dev>

…e-view

github-actions · 2026-03-05T04:10:52Z

Thanks for your first contribution, @SahulKola! 🎊

We'd love to welcome you to the npmx community. Come and say hi on Discord! And once you've joined, visit npmx.wamellow.com to claim the contributor role.

alex-key · 2026-03-05T05:50:58Z

@SahulKola Is there any particular reason clear button is not focusable?

aria-hidden="true"
tabindex="-1"

ghostdevv · 2026-03-05T06:16:28Z

@SahulKola Is there any particular reason clear button is not focusable?
aria-hidden="true"
tabindex="-1"

alex-key · 2026-03-05T08:12:11Z

@SahulKola Is there any particular reason clear button is not focusable?
aria-hidden="true"
tabindex="-1"
feat: add clear button in search input #1895 (comment)
https://discord.com/channels/1464542801676206113/1466509505696235551/1478960771223519295

Thanks, I missed that

ghostdevv · 2026-03-05T09:58:29Z

np!

SahulKola force-pushed the fix/add-clear-icon-in-search-field-for-mobile-view branch from f619f50 to 2b9581dCompare March 3, 2026 15:45

vercelBotdeployed to Preview – npmx.dev March 3, 2026 15:47 View deployment

coderabbitaiBot reviewed Mar 3, 2026
View reviewed changes

Comment threadapp/components/Header/SearchBox.vue

danielroe changed the title ~~fix: add clear button in search field (mobile view) - #1881~~fix: add clear button in search field (mobile view)Mar 3, 2026

SahulKola force-pushed the fix/add-clear-icon-in-search-field-for-mobile-view branch from 2b9581d to 747a1ddCompare March 3, 2026 16:11

vercelBotdeployed to Preview – npmx.dev March 3, 2026 16:13 View deployment

SahulKolaand others added 2 commits March 4, 2026 00:53

fix: add clear button in search field (mobile view) -npmx-dev#1881
f8c3873

[autofix.ci] apply automated fixes
8bcbeed

SahulKola force-pushed the fix/add-clear-icon-in-search-field-for-mobile-view branch from 747a1dd to 8bcbeedCompare March 3, 2026 19:23

vercelBotdeployed to Preview – npmx.dev March 3, 2026 19:26 View deployment

ghostdevv added the front Frontend, Design label Mar 5, 2026

ghostdevv changed the title ~~fix: add clear button in search field (mobile view)~~feat: add clear button in search inputMar 5, 2026

knowler reviewed Mar 5, 2026
View reviewed changes

Comment threadapp/components/Header/SearchBox.vue Outdated

ghostdevvand others added 2 commits March 5, 2026 03:57

feat: update accessibility and make visible only on focus/hover
301e56c

Update app/components/Header/SearchBox.vue
fd2a652
Co-authored-by: Nathan Knowler <nathan@knowler.dev>

vercelBothad a problem deploying to Preview – npmx.dev March 5, 2026 04:01 Failure

Merge branch 'main' into fix/add-clear-icon-in-search-field-for-mobil…
3e17ada
…e-view

vercelBotdeployed to Preview – npmx.dev March 5, 2026 04:04 View deployment

ghostdevv approved these changes Mar 5, 2026
View reviewed changes

ghostdevv enabled auto-merge March 5, 2026 04:05

ghostdevv added this pull request to the merge queue Mar 5, 2026

Merged via the queue into npmx-dev:main with commit e42fff4Mar 5, 2026
20 checks passed

github-actionsBot mentioned this pull request Mar 5, 2026
chore: release v0.3.0 #1908
Merged

coderabbitaiBot mentioned this pull request Mar 10, 2026
fix(ui): allow dismissing mobile search input #2021
Closed

Uh oh!

Uh oh!

Conversation

SahulKola commented Mar 3, 2026• edited by ghostdevv Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔗 Linked issue

🧭 Context

📚 Description

Uh oh!

vercelBot commented Mar 3, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitaiBot commented Mar 3, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Suggested reviewers

❌ Failed checks (1 inconclusive)

Uh oh!

codecovBot commented Mar 3, 2026

Codecov Report

Uh oh!

coderabbitaiBot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ghostdevv commented Mar 5, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actionsBot commented Mar 5, 2026

Uh oh!

alex-key commented Mar 5, 2026

Uh oh!

ghostdevv commented Mar 5, 2026

Uh oh!

alex-key commented Mar 5, 2026

Uh oh!

ghostdevv commented Mar 5, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

SahulKola commented Mar 3, 2026•
edited by ghostdevv
Loading

vercelBot commented Mar 3, 2026•
edited
Loading

coderabbitaiBot commented Mar 3, 2026•
edited
Loading

ghostdevv commented Mar 5, 2026•
edited
Loading