Redactor 1.1 in Matrix and toolbarFixed enabled causes issues with multiple blocks

[juresrpcic]

Description

When adding Matrick blocks with a Redactor 1.1 field in them and "toolbarFixed": true in the Redactor .json config, the toolbar keeps disappearing, getting stuck on the wrong field, moving to the right when multiple blocks are present on the same page (multiple matrix blocks with instances of Redactor).

I have disabled all other plugins to test this and still get this erratic behavior. The only message in JS console is Double-instantiating a menu button on an element from garnish.js:220 - but that's there on load, before adding any Redactor fields, so I don't think it's related.

If I set toolbarFixed to false, everything works normally - but that's not practical for clients once they put a few lines of text and can't see the menu anymore.

Steps to reproduce

1. Install Redactor 1.1
2. Add Redactor to a matrix field
3. Add toolbarFixed: true to Redactor json config
4. Add a few matrix blocks, add enough text to extend over page height
5. Redactor toolbar disappears, moves to right, gets stuck from other matrix blocks

Additional info

Craft version: 3.0.1
PHP version: PHP 7.1.10 (cli) (built: Oct 4 2017 08:54:01)
Database driver & version: MySQL 5.7.19
Plugins & versions: Redactor 1.1

[lukeyouell]

I've been having this issue too, although it isn't related to the latest Craft release as it's appearing in RC installations too.

[juresrpcic]

It could just be an issue with Redactor 1.1 - I updated both Craft 3.0.1 and Redactor 1.1 at the same time - and immediately got this report from the clients that have been using HTML fields before with no issues with the same config.

[lukeyouell]

We noticed this after updating the Redactor plugin, I just haven't had the time to create a Github issue.

We've held off on upgrading to 3.0.1 due to #2686 bricking the dashboard.

[Mosnar]

We've discovered that this has to do with the tabs on the field layout. If you refresh the page, starting on the tab with the redactor field, everything functions properly. If you start on a tab without a redactor field, things do not initialize properly. Setting toolbarFixed: false is the workaround we're using at the moment.

Update: I've run into issues with this beyond the Redactor field type. I'm running a custom version of TableMaker for Craft 3 that had the same problem. I've not had time to start digging into the lifecycle of plugin's JavaScript yet, but there looks to be some race condition-y DOM issues with the tabs.

[brandonkelly]

Will leave this open since there’s been a lot of activity here, but FFR please post Redactor plugin issues to https://github.com/craftcms/redactor/issues.

[atloveday]

Hi,

Could you please tell me where to set toolbarFixed to false?

I have searched the repositories and found a reference in 'cpresources/87bfeb4/js/craft.js' - I changed it here, uploaded the file and did a hard refresh (Ctrl+F5) and still get the error.

(Setting toolbarFixed: false is the workaround we're using at the moment.)

Thank you in advance

Andrew

[brandonkelly]

@atloveday It's a Redactor config setting (https://imperavi.com/redactor/docs/settings/toolbar/#s-toolbarfixed). You set those from [craft/]config/redactor/<Config_Name>.json. (Edit the config file that your Rich Text/Redactor field is set to use from its field settings.)

[Friksel]

@juresrpcic juresrpcic The 'Double-instantiating a menu button on an element' is not related to the Redactor field as I get this error every time on local development even on a plain fresh install of craft with a matrix field on it without any Redactor field on the entry (type).