Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

DatePicker focus ring is overridden by form validation UI red border

See original GitHub issue

What package(s) are you using?

carbon-components
carbon-components-react

Detailed description

Describe in detail the issue you’re having.

When focus is in the <DatePicker> input, blue focus ring is overridden by red border from validation UI.

Is this issue related to a specific component?

DatePicker

What did you expect to happen? What happened instead? What would you like to see changed?

For keyboard user, focus ring(blue outline) should not be overridden by form validation UI red border

What browser are you working in?

Chrome, FF

What version of the Carbon Design System are you using?

Screenshot by latest carbon react storybook

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

QRadar Workflow Analysis(Query Builder). Not any pressing time you should worry about, we should be able to fix that by overriding the styling.

Steps to reproduce the issue

Go to react storybook > DatePicker
Click on DatePicker input
Chk storybook validation UI knob

Screenshots or code

Issue Analytics

State:
Created 3 years ago
Comments:8 (7 by maintainers)

Top GitHub Comments

2reactions

emyarodcommented, Jul 23, 2020

there is an open PR to resolve that issue (https://github.com/carbon-design-system/carbon/pull/6522) but this pattern is under further reevaluation by the design team, so it may change

1reaction

tw15egancommented, Jul 23, 2020

I created a larger issue to determine an outcome in regards to this, and we can make the changes once we get a design resolution 👍

https://github.com/carbon-design-system/carbon/issues/6529