NEXT Focus ring/border flashes white when switching focus

[TheEisbaer]

Current Behavior

Focus ring/border flashes white, see video

Aufzeichnung.2024-05-16.075708.mp4

Expected Behavior

Focus ring/border does not flash

Steps To Reproduce

1. go to next skeleton docs
2. have cerberus theme selected (there its the most obvious)
3. switch focus on form elements

Link to Reproduction / Stackblitz

No response

More Information

Chrome Version 125.0.6422.61 (64-Bit)
Windows 11 23H2

[endigo9740]

Thanks, we had a similar issue in v2 - but I can't recall how we resolved it. We should be able to compare the v2 stylesheet to v3 and figure it out though. I'we welcome help doing this if someone has time!

[jaakkonakaza]

Screen.Recording.2024-05-25.at.21.05.37.mov

This seems to be caused by the animation being way too fast. In this video, I changed it to 300ms instead of 100ms. Thoughts? Would it be better to get rid of the whole animation or to make it less noticeable?

/packages/skeleton/src/plugin/components/forms.css

/* Standard Fields --- */

.input,
.textarea,
.select {
	@apply field-outter field-inner;
	@apply border-none;
- 	@apply transition-[all] duration-100;
+       @apply transition-[all] duration-300;
}

[jaakkonakaza]

Screen.Recording.2024-05-25.at.21.11.57.mov