Bug reportNov 14, 2026· 0:21· 13 views
Grommet DateInput: :focus-visible outline overflows the input field and covers the calendar button
0:21 total
Comments · 0
Be the first to comment.
Bug reportby SceneRecap AI
mediumGrommet DateInput styling: the :focus-visible outline for the text input and the calendar Button, and the outline offset and inset relative to the input border. Check both icon positions, right (default) and left (reverse).
os: macOSdpr: 1page: /iframe.html (Storybook story input-dateinput-format--format)locale: en-USbrowser: Chromium 151.0.7922.34timezone: Europe/Berlinviewport: 1280x720
Repro steps
- 1.Open the Storybook iframe for the story input-dateinput-format--format. Two empty DateInputs show the placeholder m/d/yy. The first has the calendar icon on the right and the second has it on the left.
- 2.Click the page body.
- 3.Press Tab to focus the first date input.
- 4.Look at the right edge of the first input where the calendar button sits.
- 5.Press Tab to move focus to the calendar button of the first input.
- 6.Press Tab again to move toward the reverse DateInput.
- 7.Look at the focus outline on the first input's calendar button.
Expected
When the text input is focused, a visible focus outline should stay inside the input field and should not collide with the calendar button. When the calendar button is focused, its outline should sit within the input's border and should not draw over it.
Actual
At 11.0s the first input is reported as focused, but the frames show no visible focus outline on it. At 15.0s the calendar button's green focus outline reaches the top and bottom edges of the first input's border and overlaps it. The diagnostic script also could not separate the button from the input (noBtn:true at 9.8s) and could not find the reverse input (found:false at 17.0s).
Evidence
consolegrommet#8229 input-1: found:true, noBtn:true, ix 449, iy 61, ir 795, ib 104. The input's right bound (795) ends where the calendar button begins, and the button was not detected as a separate element.
visualA red diagnostic banner says the input is focused and asks to check outline and button overlap at the right edge. No visible focus outline appears on the first input.
visualThere is still no visible focus outline on the first input while the banner is shown.
visualA green focus outline surrounds the calendar button on the right of the first input. It spans the full input height and touches or overlaps the input's top and bottom border.
consolegrommet#8229 input-2 (reverse): found:false. The diagnostic did not locate the reverse DateInput, so its left-edge behavior was not verified.
visualA red banner says the reverse DateInput is focused. It covers part of the second input's left calendar icon. The green outline stays on the first input's calendar button, and no outline is visible on the reverse input.
visualThe state is unchanged: the green outline is still on the first input's calendar button and the reverse input shows no visible outline.
Issue markdown (copy-paste ready)
## Summary
In the Grommet DateInput story `input-dateinput-format--format`, the calendar button's focus outline spans the full height of the input and overlaps the input border (15.0s). The focused text input shows no visible focus outline (11.0s).
## Environment
- Chromium 151.0.7922.34, macOS
- Viewport 1280x720, DPR 1, en-US, Europe/Berlin
- Storybook `/iframe.html`, story `input-dateinput-format--format`
## Steps to reproduce
1. Open the story. Two empty DateInputs show `m/d/yy` (0s).
2. Click the page body (6.9s).
3. Press Tab to focus the first input (7.6s).
4. Check the right edge of the first input (11.0s).
5. Press Tab to focus the calendar button (14.0s), then press Tab again (14.6s).
6. Check the outline around the calendar button (15.0s).
## Expected
The focus outline of the input and of the calendar button should be visible. It should stay inside the input border and should not overlap neighboring elements.
## Actual
- At 11.0s the input is reported as focused, but no focus outline is visible.
- At 15.0s the green outline of the calendar button reaches the top and bottom border of the input and overlaps it.
## Evidence
- 9.8s console: `grommet#8229 input-1: {found:true, noBtn:true, ix:449, iy:61, ir:795, ib:104}`. The input's right bound ends where the button starts.
- 11.0s and 13.0s visual: a diagnostic banner says the input is focused, but no outline is visible on the input.
- 15.0s visual: the button's focus outline spans the full input height and overlaps the input border.
- 17.0s console: `grommet#8229 input-2 (reverse): {found:false}`. The reverse input could not be checked.
- 17.0s to 20.5s visual: no outline is visible on the reverse input. The banner partly covers its left icon.
## Notes
The reverse (left icon) variant was not verified because the diagnostic did not find it. Treat its result as unknown, not as a passing control.
## Suggested area
DateInput focus styles (`:focus-visible` outline and offset) for the text input and the calendar Button, in both icon positions.
*Recorded with SceneRecap.*Your recordings could explain themselves too.
Free plan · silent recordings welcome · bug reports included.
Try SceneRecap free →