[Checkbox] Control still has the blue outline on focus, even wih focus-visible package applied

[la55u]

Describe the bug

The checkbox square has a blue outline color when focused with mouse click, despite the focus-visible package being used.

To reproduce

1. npm i focus-visible
2. add import "focus-visible/dist/focus-visible" to _app.js
3. add a <Checkbox/> element

Expected behavior

The blue outline should only be visible when using keyboard navigation, just like with Button etc.

System information

"@chakra-ui/core": "^1.0.0-rc.5",
"next": "9.5.3",

[cschroeter]

It is also the case if you use :focus-visible which is now natively supported in Chrome

[stale]

Hi!
This issue hasn't seen any activity recently. We close inactive issues after 35 days to manage the volume of issues we receive.
If we missed this issue or you want to keep it open, please reply here. That will reset the timer and allow more time for this issue to be addressed before it is closed.

[rheng001]

Facing the same issue

[kdfriedman]

I was recently able to make this work as expected:

.chakra-checkbox__input[data-focus-visible-added]
  + .chakra-checkbox__control[data-focus] {
  box-shadow: 0 0 0 3px rgb(66 153 225 / 60%);
}

I'm using the data-focus-visible-added attribute which is appended to the previous sibling input element. If you combine the input and span elements, the styling works as expected for tabbed focus vs click focus. As a caveat, I have the focus-visible polyfill installed as well.

[lingyun-z]

I added these in my global theme and it works as expected.

*:focus {
  box-shadow: none !important;
}

*[data-focus] {
  box-shadow: none !important;
}

[mwmcode]

Safari (the new IE) is supposed to support focus-visible soon 🤞 can i use

The world's most valuable company is always late to the party focus-visible, <input type="date" />, flex gap, BroadcastChannel....😐

I needed to overwrite checkbox boxshadow so I ended up modifying @kdfriedman 's solution to

/* using tailwind */
.chakra-radiobox__control[data-focus],
.chakra-checkbox__control[data-focus] {
  @apply ring-2 ring-red-300 !important;
}

[Blagoj5]

Another workaround can be:

<Checkbox
  size="sm"
  colorScheme="primary"
  defaultIsChecked
  css={`
    > span:first-of-type {
      box-shadow: unset;
    }
  `}
  >
  Random text
</Checkbox>

[Brettm12345]

The focus visible package just adds the polyfill for the focus visible css selector which indicates keyboard focus. In order to remove the box shadow you gotta do this

<Checkbox _focusVisible={{ shadow: 'outline'}} _focus={{ shadow: 'none'}} />

to apply this globally add the following to your global styles

'.js-focus-visible :focus:not(.focus-visible)': {
  shadow: 'none',
},

[anilanar]

Perhaps what's not clear is whether if this is intended or just a bug, or under which circumstances this is a bug.

[verekia]

Thanks @Brettm12345.

If you disable Chakra's CSS Reset, you do need to add this style manually.

[Nic-Performio]

Im having the same issue with switch, radio button and checkbox. However it does work on button. I have tried the suggestions above but nothing has worked. Has anyone else faced this?

When trying some of these work arounds I was playing around in dev tools and it looks like it works when forcing element state but does not work without doing that.

[ishowta]

In chakra component such as Checkbox and Radio, input element is hidden and styled by custom elements. They have the data-focus attribute, so the following code probably work.

const GlobalStyles = css`
  /*
    https://github.com/WICG/focus-visible#2-update-your-css

    This will hide the focus indicator if the element receives focus via the mouse,
    but it will still show up on keyboard focus.
  */
  .js-focus-visible :focus:not(.focus-visible),
  .js-focus-visible :focus:not(.focus-visible) + [data-focus] {
    outline: none;
    box-shadow: none;
  }
`

[verekia]

For those who would rather not keep the fix in their code, I've included it as a theme extension into a library of mine of Chakra helpers. Not particularly advocating using random people's libraries in your projects, but just saying it's there ;)

[Nic-Performio]

In chakra component such as Checkbox and Radio, input element is hidden and styled by custom elements. They have the data-focus attribute, so the following code probably work.

const GlobalStyles = css`
  /*
    https://github.com/WICG/focus-visible#2-update-your-css

    This will hide the focus indicator if the element receives focus via the mouse,
    but it will still show up on keyboard focus.
  */
  .js-focus-visible :focus:not(.focus-visible),
  .js-focus-visible :focus:not(.focus-visible) + [data-focus] {
    outline: none;
    box-shadow: none;
  }
`

Thanks, this worked! :)

[segunadebayo]

For anyone still having this issue. Kindly use the workaround suggested above.

[ehynds]

Another option if you want to set this globally in your theme:

const theme = extendTheme({
  components: {
    Checkbox: {
      baseStyle: {
        control: {
          _focus: {
            boxShadow: 'none',
          },
        },
      },
    }
  }
});

[lcswillems]

In the release logs of Chakra v2, I see a mention to a data-focus-visible-disabled attribute:

When using the focus-visible package, you can now opt out of the automatic focus style override by adding data-focus-visible-disabled to a DOM element.

Is it useful to solve this issue? Is there any documentation or example about it?

[DavidLabaz]

I added these in my global theme and it works as expected.

*:focus {
  box-shadow: none !important;
}

*[data-focus] {
  box-shadow: none !important;
}

dude, thank you so much