RichText - toolbar persists when control loses focus, when rendered inside Panel or Modal

Category

[ ] Enhancement

[X] Bug

[ ] Question

Version
3.15.0

Expected / Desired Behavior / Question
When I place a RichText control inside a Modal or Panel, I would expect that when the control loses focus, the toolbar should automatically hide.

Observed Behavior
The RichText toolbar is on screen permanently, no matter which element on the page has focus.

Steps to Reproduce
Use YO to setup a new Web Part project, add @pnp/spfx-controls-react to the project. Modify default React class component to add something like this to the render function:

<Panel isOpen={true} type={PanelType.medium} >
  <TextField value={this.state.textField} onChange={(event, value) => { this.setState({textField: value}); }} />
  <RichText value={this.state.richTextField} onChange={(text) => { this.setState({richTextField: text}); return(text); }} />
</Panel>

Observe that when clicking inside the RichText control, then clicking in the plain text field above it - the RichText toolbar remains visible.

Sit the same two text edit controls outside of the Panel (i.e. in the main body of the web part), and observe that focus/blur works fine.

Reproduce the issue with RichText and TextField inside an open Panel or Modal, then inspect the RichText focus and blur handling. Confirm the toolbar hides when focus moves to the TextField or another element, while retaining the existing behavior outside the Panel; add or update coverage if the relevant test location is found.