Mastodon: Toot box not compatible with Grammarly, typo fixes reverted on submit

Created on 3 Jun 2017 · 7Comments · Source: tootsuite/mastodon

(1.4.1 and also all previous for the last two months at least, on .xyz with vanilla styles etc)

If you fix typos in your toot using Grammarly or some other spell checking extension, and then don't make a manual change to the text (eg. typing a period), upon submitting, the changes are undone.

After pressing the toot button, you can also briefly see the changes revert in the tootbox itself.

Here it's illustrated with some screenshots:

Clumsy tooter makes typos
screenshot_20170603_163719

Fixes them with Grammarly
screenshot_20170603_163728

All good, let's toot!
screenshot_20170603_163738

Oh no!
screenshot_20170603_163745

[x] I searched or browsed the repo’s other issues to ensure this is not a duplicate.
[x] This bug happens on a

Source

MightyPork

Most helpful comment

React handles text changing in the textarea by keyboards events. Grammarly changes text, but doesn't fire any events. So we can't handle those changes. This may be fixed by getting text on just before submitting.

For a workaround, you can avoid this by type anything in the textbox (and delete if you want) after Grammarly fixes.

unarist on 4 Jun 2017

👍2 😕1

All 7 comments

For a workaround, you can avoid this by type anything in the textbox (and delete if you want) after Grammarly fixes.

unarist on 4 Jun 2017

👍2 😕1

@MightyPork Tried to take a look at this, but could not get Grammarly to check the textarea (latest Chrome and Firefox, latest master and latest stable version). Did you do anything special to make it work?

sorin-davidoi on 7 Jun 2017

@sorin-davidoi The Grammarly extension I use is the latest from Chrome Web Store, 14.766.968, in Google Chrome 58.0.3029.110. It worked without anything special on my end, I just installed it.

I have a "premium" account on Grammarly, just in case that makes a difference. From what I see on their Plans page, there are differences just in what kind of errors it can catch, not sites supported.

Edit - more details:
Linux N202 4.11.3-1-ARCH #1 SMP PREEMPT Sun May 28 10:40:17 CEST 2017 x86_64 GNU/Linux

MightyPork on 7 Jun 2017

@MightyPork Hm, very strange. Grammarly only appears to work in the "mobile view" (when only the compose column is visible). Can you confirm this?

sorin-davidoi on 7 Jun 2017

Know what, that's really weird.

I have this userstyle to make the columns stretch, and if I turn it off, Grammarly stops working.

@media (min-width: 1000px) {
        .columns-area>div {
            width: 25%;
        }
        .columns-area>div>.column,
        .columns-area>div>.mastodon-column-container>.column {
            width: 100%;
        }
}

(Talking of which, why don't they stretch by default? But that's surely an open issue somewhere else)

What I think but have no proof of, it might be that the injected CSS causes a redraw and then Grammarly finds the textarea, not before. i.e. yet another Weird React Glitch. I'll try to verify this

MightyPork on 7 Jun 2017

I guess that is a Grammarly bug? Regarding stretching, on master right the columns are dynamic (you can have Compose, Home, Notification, Local, Federated, Getting Started...).

sorin-davidoi on 7 Jun 2017

Yup, appears to be a Grammarly bug of some sort (or rather React(?) confusing it). If you toggle 'flex: 0 0 auto;' on the .column class in dev tools, it catches on.

MightyPork on 7 Jun 2017

Was this page helpful?

0 / 5 - 0 ratings