React-admin: Link input field is cut off in RichTextInput

[nickwaelkens]

What you were expecting:
The input field for adding a link to a word/sentence in the ra-input-rich-text should be on top of everything, no matter where the word is situated in the text.

What happened instead:
The input field gets cut off by the actual content area.

Steps to reproduce:
As experienced on the demo page:

• Try to add a link to the first word
• The link input field opens, but appears underneath the save button (see screenshot below)

Other information:
This is what happens when I'm trying to add a link to the first word in the editor:

I'm guessing something went wrong when transforming the Quill theme to JSS? Overall, the theming of the RichTextInput feels weird.

Environment

• React-admin version: 2.2.0
• React version: 16.4.2
• Browser: latest Chrome on OSX, same for Safari

[djhi]

Confirmed. Thanks for reporting :)

[wwarne]

Sorry to bother but it seems to me that this fixes only one part of the problem. Then you try to add a link to the first word the input field is cut off by the left side. It's because it has style with negative values like left: -107.5px;

[westende]

This problem is reintroduced somewhere along the line and reproducible on the same demo page mentioned above in react-admin.

I am experiencing this with version 3.2.1 of react-admin and 3.2.2 of ra-input-rich-text.

Quill popups are cut off because of overflow: hidden; on an ancestor .MuiCard-root. Setting position: relative; on an ancestor of .MuiCard-root could work as stated in this article. However some elements in between .MuiCard-root and the popup already have position set to relative. These elements are .ql-container and .MuiFormControl-root.

Both .MuiCard-root and .MuiFormControl-root originate from Material-UI. As far as I see there are two options:

1. Remove overflow: hidden; on the .MuiCard-root element in question.
2. Remove position: relative; from .ql-container and .MuiFormControl-root elements in question AND add position: relative; to an ancestor of the .MuiCard-root element in question.

Are there any other options you can think of, or any issues that you foresee with the two options above?

[fzaninotto]

Bug confirmed, reopening.

[fzaninotto]

The bug comes from an incompatibility between material-ui's <Card> component and Quill's positioning algorithm for the link tooltip. In my opinion, this is not something we can fix in react-admin, because the fix requires altering the Card style in Edit and Create views, and we can't do that in the general way without nasty side effets.

Note that the fix is easy in user land:

import { Edit, SimpleForm, TextInput } from 'react-admin';
+import { withStyles } from '@material-ui/core/styles';

-const PostEdit = props => (
+const PostEdit = withStyles({ card: { overflow: 'initial' } })(props => (
   <Edit {...props}>
       <SimpleForm>
            // ...
       </SimpleForm>
   </Edit>
-);
+));

I think the best way for react-admin to tackle this bug is by adding the above snippet in the documentation.