Link input field is cut off in RichTextInput

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

[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;

[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.