Skip to content

fix: make custom input icons render cross-browser#6876

Draft
michaelmkraus wants to merge 2 commits into
mainfrom
fix-input-icons-cross-browser
Draft

fix: make custom input icons render cross-browser#6876
michaelmkraus wants to merge 2 commits into
mainfrom
fix-input-icons-cross-browser

Conversation

@michaelmkraus
Copy link
Copy Markdown
Contributor

@michaelmkraus michaelmkraus commented Jun 3, 2026

Proposed changes

Fixes cross-browser rendering of custom icons (calendar, clock) for DBInput components with date, datetime-local, and time input types. Previously, these icons were only visible in Chromium-based browsers due to a @supports selector(::-webkit-calendar-picker-indicator) restriction.

  • Moved date, datetime-local, and time icon definitions out of the @supports block so custom icons render in all browsers (Chromium, Firefox, Safari).
  • Kept month and week inside the @supports block, since Firefox doesn't support these input types and renders them as plain text fields — showing a calendar icon would be misleading.
  • Added pointer-events: none on the ::after pseudo-element to ensure custom icons don't intercept clicks meant for native picker triggers.
  • Added z-index: 1 on ::-webkit-calendar-picker-indicator and ::-webkit-search-cancel-button so the invisible native click target reliably sits above the custom icon layer.

resolves #5077

Checklist

Code Quality

  • I have reviewed my own code (self-review), including the screen- and snapshots
  • I have reviewed my changes locally with an AI assistant (e.g. GitHub Copilot, Kiro, etc.)
  • No hardcoded values, magic numbers, or debug code left in

Validation

  • I have added/updated tests that cover my changes
  • I have tested across all relevant frameworks (React, Angular, Vue) if applicable

General

  • The PR title follows the conventional commits format (e.g. feat:, fix:, chore:), as in Git Commit Conventions
  • If architecture, structure, or conventions changed inside a packages/* folder, the corresponding AGENTS.md has been updated

🔭🐙🐈 Test this branch here: https://design-system.deutschebahn.com/core-web/review/fix-input-icons-cross-browser

@michaelmkraus michaelmkraus self-assigned this Jun 3, 2026
@michaelmkraus michaelmkraus added the 🧱components Changes inside components folder label Jun 3, 2026
@github-project-automation github-project-automation Bot moved this to 🏗 In progress in UX Engineering Team Backlog Jun 3, 2026
@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Jun 3, 2026

⚠️ No Changeset found

Latest commit: dae0ddd

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🧱components Changes inside components folder 🏘components

Projects

Status: 🏗 In progress

Development

Successfully merging this pull request may close these issues.

Input Icons only getting displayed on Chromium based browsers

1 participant