fix: SW-2043 remove doubled inner shadow on input-group focus#142
Open
boramyi-ts wants to merge 1 commit into
Open
fix: SW-2043 remove doubled inner shadow on input-group focus#142boramyi-ts wants to merge 1 commit into
boramyi-ts wants to merge 1 commit into
Conversation
InputGroupInput/InputGroupTextarea build on Input/Textarea, which carry focus-visible:shadow-focus. The wrapper stripped the control's ring but not its shadow, so on keyboard focus the inner control painted its own shadow-focus offset from and doubled with the wrapper's. Add focus-visible:shadow-none to the control so only the wrapper shows the focus indicator. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Coverage Report
File Coverage
|
||||||||||||||||||||||||||||||||||||||
owilliams-tetrascience
approved these changes
Jun 18, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
SW-2043 — fixes a doubled focus shadow on the Input Group.
InputGroupInput/InputGroupTextareawrap the baseInput/Textarea, which carryfocus-visible:shadow-focus. The wrapper suppressed the control's ring (focus-visible:ring-0) but not its shadow, so on keyboard focus the inner control rendered its ownshadow-focus— offset from, and doubled with, the wrapper'shas-[…]:shadow-focus. The result was a faint second shadow box around the inner field.Fix
Add
focus-visible:shadow-noneto bothInputGroupInputandInputGroupTextareaso only the wrapper shows the focus indicator.Before / after
Input group on keyboard focus — Before: wrapper shadow + the inner control's own shadow (doubled, offset). After: a single wrapper-level indicator.
📄 Interactive: sw-2043-inner-shadow-before-after.html · download raw
Why no !important / tailwind-merge change
shadow-nonebeatsshadow-focusby cascade in both class orders (verified directly:shadow-focus shadow-noneandshadow-none shadow-focusboth compute tonone), sofocus-visible:shadow-nonedeterministically cancels the inheritedfocus-visible:shadow-focus.yarn lint+yarn typecheckpass.🤖 Generated with Claude Code