[OPT-2143] Don't show :focus styles when actioning an interactive element using the cursor Created: 04/Apr/19  Updated: 03/May/19  Resolved: 16/Apr/19

Status: Done
Project: Camunda Optimize
Component/s: frontend
Affects Version/s: None
Fix Version/s: 2.5.0, 2.5.0-alpha1

Type: Feature Request Priority: L3 - Default
Reporter: Franz Heidl Assignee: Unassigned
Resolution: Fixed Votes: 0
Labels: product_design
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PNG File OPT-click-focus.png    
Issue Links:
is related to OPT-2091 Do not focus first typeahead entry wh... Done
Title Keywords: focus
PM Priority: 120


Chrome (and possibly other browsers) show custom focus styles when actioning interactive elements (e.g. buttons) using the mouse/the cursor. We should prevent that since it feels odd (and is not consistent how Chrome deals with default/built-in focus styles, which are not shown when using the cursor to action).


  • Click any button/interactive element using cursor/mouse


  • The button/interactive element should not show the custom focus style (blue box-shadow)


  • Custom box-shadow focus style is shown.

Please note: When focussing the button using the tab key or any other means to move the focus around, the focus style should be visible. Also text and related inputs incl. textareas should show the focus style when clicked.

Comment by Franz Heidl [ 15/Apr/19 ]

Here's a quick pen I made to compare the behaviour of default / non-custom-focus-styled elements: https://codepen.io/franzheidl/pen/OGpVaj

Generated at Fri Sep 20 03:13:08 CEST 2019 using JIRA 6.4.6#64021-sha1:33e5b454af4594f54560ac233c30a6e00459507e.