Bug reportOct 20, 2026· 0:26· 7 views
daisyUI 5.7.50: disabled last join-item loses its right border
0:26 total
Comments · 0
Be the first to comment.
Bug reportby SceneRecap AI
lowdaisyUI join component CSS: border or disabled-state rules for the last .join-item
os: macOSdpr: 1issue: #4807locale: en-USbrowser: Chromium 151.0.7922.34library: daisyUI v5.7.50timezone: Europe/Berlinviewport: 1280x720
Repro steps
- 1.Open a page with a .join group of two .join-item buttons, A and B, both enabled. This is the control.
- 2.Add a second .join group where the last item, B, is disabled.
- 3.Add a third .join group where the first item, A, is disabled and the last item, B, is enabled. This is control 2.
- 4.Compare the right border of the last item in each group.
Expected
A disabled last .join-item keeps its right (end) border. The join group shows a full border on both sides, the same as when both items are enabled.
Actual
When the last .join-item is disabled, its right border is not rendered. The 'B (disabled)' item in the bug row has no visible right border. Both control rows render their borders intact.
Evidence
visualBug row labeled 'Bug: last item disabled: B's right border is MISSING'. The 'B (disabled)' item shows no visible right border.
visualControl row labeled 'Control: both enabled: full border on both sides'. The enabled B shows its right border. Overlay reads 'right border present on enabled B (control)'. This case works correctly.
visualOverlay reads 'right border of disabled last B is MISSING', pointing at the bug row.
visualControl 2 row labeled 'Control 2: first item disabled (not last): borders intact'. Overlay reads 'disabled A (not last): borders intact'. This case works correctly.
visualOverlay reads 'Fix merged PR #4806 (2026-10-17), not yet in npm v5.7.50'.
visualBadge reads 'daisyUI v5.7.50 · 2026-10-20 · Chromium'.
Issue markdown (copy-paste ready)
## daisyUI 5.7.50: disabled last `.join-item` loses its right (end) border Related: issue #4807 **Environment** - daisyUI v5.7.50 - Chromium 151.0.7922.34, macOS - Viewport 1280x720, DPR 1 **Steps to reproduce** 1. Render a `.join` with two `.join-item` buttons, A and B, both enabled (control). (1.0s) 2. Render a `.join` where the last item, B, is disabled. (1.0s) 3. Render a `.join` where the first item, A, is disabled and B is enabled (control 2). (1.0s) 4. Compare the right border of the last item in each group. (9.0s) **Expected** A disabled last `.join-item` keeps its right border. The group shows a full border on both sides. **Actual** The disabled last item 'B (disabled)' has no visible right border. (1.0s, 13.0s) **Controls (working)** - Both items enabled: the right border on B is present. (9.0s) - First item disabled, not last: borders are intact. (17.0s) **Notes** - Overlay states: 'Fix merged PR #4806 (2026-10-17), not yet in npm v5.7.50'. (21.0s) - The bug appears only when the disabled item is the last item in the join. **Suggested area** The join component CSS, specifically the border or disabled-state rules for the last `.join-item`. *Recorded with SceneRecap.*
Your recordings could explain themselves too.
Free plan · silent recordings welcome · bug reports included.
Try SceneRecap free →