In FocusRing if we give css to focusClass, focus ring is not disappeared on loosing focus

[upender7270]

🐛 Bug Report

In FocusRing if we give CSS to focusClass, CSS is not disappearing after losing focus. When we give CSS to the focusRingClass it is working as expected. But focusRingClass is only for CSS class to apply when the element has keyboard focus, I want mouse actions as well.

🤔 Expected Behavior

When we click outside the button, CSS should be disappeared

😯 Current Behavior

When we click outside the button, CSS is not disappearing

💻 Code Sample

.button {
  -webkit-appearance: none;
  appearance: none;
  background: green;
  border: none;
  color: white;
  font-size: 14px;
  padding: 4px 8px;
}

.button.focus-ring {
  outline: 2px solid dodgerblue;
  outline-offset: 2px;
}

import {FocusRing} from '@react-aria/focus';

<FocusRing focusClass="focus-ring">
  <button className="button">Test</button>
</FocusRing>

Click the tab to focus button and click outside to check.

🌍 Your Environment

Software	Version(s)
react-spectrum
Browser	Chrome, Brave
Operating System	Mac OS, Ubutntu

[snowystinger]

I think you're saying that if you click off with the mouse, the focus ring goes away, but if you click on the button once more after that, the focus ring is visible and it shouldn't be https://codesandbox.io/s/peaceful-dream-7jtwje?file=/src/App.js Which is what I'm seeing here, not sure why though, our docs are working well. This will need some more investigation.

[LFDanLu]

@upender7270 The sandbox @snowystinger attached is actually working as expected, clicking on the background to blur the button removes the focus styles properly. Can you provide your own sandbox reproducing the issue you described?

[upender7270]

@snowystinger Thanks for putting effort to resolve my issue. I was using @react-aria/focus version 3.4.1. By upgrading to version 3.6.1 issue is resolved.