Fix saveOnEnter : Use normal click on Save button and fix helperText linked issue

packages/ra-input-rich-text/src/index.js

@@ -17,7 +17,7 @@ const RichTextInput = ({
     toolbar = true,
     fullWidth = true,
     configureQuill,
-    helperText = false,
+    helperText,
     label,
     source,
     resource,

packages/ra-ui-materialui/src/button/SaveButton.spec.tsx

@@ -3,6 +3,10 @@ import React from 'react';
 import expect from 'expect';
 import { TestContext } from 'ra-core';
 
+import Create from '../detail/Create';
+import SimpleForm from '../form/SimpleForm';
+import Toolbar from '../form/Toolbar';
+import TextInput from '../input/TextInput';
 import SaveButton from './SaveButton';
 
 describe('<SaveButton />', () => {
@@ -41,8 +45,50 @@ describe('<SaveButton />', () => {
                 />
             </TestContext>
         );
+        fireEvent.click(getByLabelText('ra.action.save'));
+        expect(onSubmit).toHaveBeenCalled();
+    });
+
+    it('should trigger submit action when Enter key if no saving is in progress', () => {
+        const onSubmit = jest.fn();
+
+        const defaultCreateProps = {
+            basePath: '/foo',
+            id: '123',
+            resource: 'foo',
+            location: {},
+            match: {},
+        };
+
+        const SaveToolbar = props => (
+            <Toolbar {...props}>
+                <SaveButton
+                    label="enterButton"
+                    handleSubmitWithRedirect={onSubmit}
+                    submitOnEnter={true}
+                    saving={false}
+                />
+            </Toolbar>
+        );
+
+        const { getByLabelText } = render(
+            <TestContext>
+                <Create {...defaultCreateProps}>
+                    <SimpleForm toolbar={<SaveToolbar />}>
+                        <TextInput label="Title" source="title" />
+                    </SimpleForm>
+                </Create>
+            </TestContext>
+        );
+
+        const input = getByLabelText('Title');
+        fireEvent.focus(input);
+        fireEvent.change(input, { target: { value: 'test' } });
 
-        fireEvent.mouseDown(getByLabelText('ra.action.save'));
+        const button = getByLabelText('enterButton');
+        //console.log(button);
+        //fireEvent.click(getByLabelText('ra.action.save'));
+        fireEvent.keyPress(input, { key: 'Enter', keyCode: 13 });
         expect(onSubmit).toHaveBeenCalled();
     });
 
@@ -55,7 +101,7 @@ describe('<SaveButton />', () => {
             </TestContext>
         );
 
-        fireEvent.mouseDown(getByLabelText('ra.action.save'));
+        fireEvent.click(getByLabelText('ra.action.save'));
         expect(onSubmit).not.toHaveBeenCalled();
     });
 
@@ -77,7 +123,7 @@ describe('<SaveButton />', () => {
             </TestContext>
         );
 
-        fireEvent.mouseDown(getByLabelText('ra.action.save'));
+        fireEvent.click(getByLabelText('ra.action.save'));
         expect(dispatchSpy).toHaveBeenCalledWith({
             payload: {
                 message: 'ra.message.invalid_form',

packages/ra-ui-materialui/src/button/SaveButton.tsx

@@ -31,12 +31,7 @@ const SaveButton: FC<SaveButtonProps> = ({
     const notify = useNotify();
     const translate = useTranslate();
 
-    // We handle the click event through mousedown because of an issue when
-    // the button is not as the same place when mouseup occurs, preventing the click
-    // event to fire.
-    // It can happen when some errors appear under inputs, pushing the button
-    // towards the window bottom.
-    const handleMouseDown = event => {
+    const handleClick = event => {
         if (saving) {
             // prevent double submission
             event.preventDefault();
@@ -56,22 +51,13 @@ const SaveButton: FC<SaveButtonProps> = ({
         }
     };
 
-    // As we handle the "click" through the mousedown event, we have to make sure we cancel
-    // the default click in case the issue mentionned above does not occur.
-    // Otherwise, this would trigger a standard HTML submit, not the final-form one.
-    const handleClick = event => {
-        event.preventDefault();
-        event.stopPropagation();
-    };
-
     const type = submitOnEnter ? 'submit' : 'button';
     const displayedLabel = label && translate(label, { _: label });
     return (
         <Button
             className={classnames(classes.button, className)}
             variant={variant}
             type={type}
-            onMouseDown={handleMouseDown}
             onClick={handleClick}
             color={saving ? 'default' : 'primary'}
             aria-label={displayedLabel}

packages/ra-ui-materialui/src/input/ReferenceInput.tsx

@@ -12,6 +12,7 @@ import {
     InputProps,
     Pagination,
     Sort,
+    warning as warningLog,
 } from 'ra-core';
 
 import sanitizeInputProps from './sanitizeRestProps';
@@ -192,7 +193,7 @@ interface ReferenceInputViewProps {
     classes?: object;
     className?: string;
     error?: string;
-    helperText?: string;
+    helperText?: string | boolean;
     id: string;
     input: FieldInputProps<any, HTMLElement>;
     isRequired: boolean;
@@ -268,6 +269,15 @@ export const ReferenceInputView: FunctionComponent<ReferenceInputViewProps> = ({
           }
         : meta;
 
+    // helperText should never be set on ReferenceInput, only in child component
+    // But in a Filter component, the child helperText have to be forced to false
+    warningLog(
+        helperText !== undefined && helperText !== false,
+        "<ReferenceInput> doesn't accept an helperText value, it should be set on the child component"
+    );
+
+    const disabledHelperText = helperText === false ? { helperText } : {};
+
     return cloneElement(children, {
         allowEmpty,
         classes,
@@ -284,6 +294,7 @@ export const ReferenceInputView: FunctionComponent<ReferenceInputViewProps> = ({
         setPagination,
         setSort,
         translateChoice: false,
+        ...disabledHelperText,
         ...sanitizeRestProps(rest),
     });
 };