Fix <RichTextInput> not working on IE11

[phacks]

Fixes #2675

The underlying problem is in the css-vendor library, specifically in the cssVendor.supportedValue method that breaks on IE11 with content and '' as parameters.

the content: '' attribute is currently not working on Chrome either.

[Kmaschta]

Are you sure this change doesn't affect the display of the component?
I would use content: ' ' with a space, but I'm not sure.

[phacks]

@Kmaschta My guess is that since the property is considered as invalid in Chrome (see screenshot), it currently has no effect on the display. I can however try and screenshot multiple situations in Chrome and see if each of them works in IE11:

• current;
• without the content (the suggested PR);
• with a proper content: ' '

I may have some time today, otherwise tomorrow

[Kmaschta]

Nvm you're right, if it doesn't work on Chrome and it breaks IE, this make no sense to keep it.

[fzaninotto]

The empty content was added in aad754a, probably for a good reason. Removing the content field in the CSS style probably removes the entire ::before and ::after styles (see https://stackoverflow.com/questions/17067918/why-do-the-before-and-after-pseudo-elements-require-a-content-property), so I don't think this patch is harmless.

[phacks]

@fzaninotto Good catch! I’ll do a more thorough review of any impacts (and/or try to set the content to ' ' instead of '') and will get back to you with what I found.

[phacks]

@fzaninotto Hi, and happy new year 🥳

Found a way better approach to solving this: as per cssinjs/jss#866 (JSS is a dependency of MaterialUI), the property content: '' is invalid (which explains why it wasn’t properly parsed by Chrome).

To translate the proper CSS content: '' in JSS, one must specify content: '""'. I updated the PR to reflect this.

Works like a charm now! However, there still is an issue on the layout (long text requires horizontal scrolling), which I’ll try to fix in a future PR (see screenshot):

Thanks!

[phacks]

Note : this fix has the side effect of repairing the “selected” visual hints for the input.

Before:

After:

Is that OK for you?

[djhi]

Thanks!