RichText state bug when clicking "outside" of component

[SharePickle]

Category

[ ] Enhancement

[x] Bug

[ ] Question

Version

1.15.0

Description

Incorrect state.editing value is set when clicking on any layered components (Fabric UI layer) inside editor panel, for example, color picker or fonts dropdown.
This happens because elementContains returns false for Dropdown options, despite them being "inside" panel.

 _this.handleClickOutside = function (event) {
            // THIS LINE has the bug
            // Fabric Layer component is outside of the panel and host component
            var outside = !Utilities_1.elementContains(_this._wrapperRef, event.target);
            // Did we click outside?
            if (outside) {
                // If we are currently editing, stop editing
                // -- unless we're using the property pane or the dialog
                if (_this.state.editing) {
                    _this.setState({
                        editing: false
                    });
                }
            }
            else {
                // We clicked inside
                if (!_this.state.editing) {
                    // if we aren't currently editing, start editing
                    _this.setState({ editing: true });
                }
            }
        };

Expected / Desired Behavior / Question

When clicking inside editor panel state should not change to editing = false.

Observed Behavior

When clicking inside editor panel state changes to editing = false thus breaking component state.

Steps to Reproduce

Click ... (more) on the quill editor bar, select any color or font size.

EDIT: hm, it's not a Layer issue, but the fact that when clicking on dropdown option it's being removed before elementContains has a chance to check if it's inside.

[ghost]

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

[michaelmaillot]

hi @SharePickle,

Did you have the chance to test this on latest version (3.15.0)? I tried it on my side and it works.

[SharePickle]

@michaelmaillot hey, we decided to not use this component, so I can't tell if it works, sorry.
I'm going to close this I think, as it's no longer relevant.

[stevesuk]

I have a similar issue. If you place the RichText control inside a Fluent UI React Panel or Modal - the rich text editor toolbar seems to not disappear when the the editor loses focus. This is quite annoying if you have a series of fields on a form, because the toolbar tends to cover over the field above, making it unusable. Anyone have a workaround?

[michaelmaillot]

Hi @stevesuk,

I confirm I can repro what you've experienced, with both Dialog & Panel.

Would you mind declaring an issue with all the requested info, including screenshots?

[stevesuk]

Would you mind declaring an issue with all the requested info, including screenshots?

Hello - yes, will certainly do that.