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

[stevesuk]

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.

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[github-actions[bot]]

Thank you for submitting your first issue to this project.

[ivonool]

I have the same issue with this control on a panel - v3.17.0

[shubhamRathi0608]

Any fix yet? Having same issues

[shubhamRathi0608]

@stevesuk did you find any solution?

[stevesuk]

@stevesuk did you find any solution?

Wasn't able to find a fix for the reported bug. In the end we changed our solution to use the TinyMCE richtext editor instead (which was a minor battle in itself - but we got there).

[shubhamRathi0608]

@michaelmaillot any help please?

[michaelmaillot]

Hi @shubhamRathi0608, I'll try to have a look at some point, but feel free to give a try 🙂

[raclettierer]

I have the same problem. in addition when I close the panel and reopen the extenden Dialog won't open any more

[magdalenafernlund]

@stevesuk

I had the same issue in a Panel. v3.19.0 When i added eventBubblingEnabled to the Panel component the problem disappeared.

<Panel 
  layerProps={{ eventBubblingEnabled: true }}
  ...otherProps...
</Panel