Merge pull request #4107 from marmelab/fix-resettable-text-field-enda…

…dornment Fix TextInput endAdornment when resettable
marmelab · Dec 3, 2019 · 5bca629 · 5bca629
2 parents 6f1f943 + 17a8dc9
commit 5bca629
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 31 deletions.
diff --git a/packages/ra-ui-materialui/src/input/ResettableTextField.js b/packages/ra-ui-materialui/src/input/ResettableTextField.js
@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import InputAdornment from '@material-ui/core/InputAdornment';
@@ -18,11 +18,8 @@ const useStyles = makeStyles({
     },
     clearButton: {
         height: 24,
-        padding: 0,
-        width: 0,
-    },
-    visibleClearButton: {
         width: 24,
+        padding: 0,
     },
     selectAdornment: {
         position: 'absolute',
@@ -51,7 +48,6 @@ function ResettableTextField({
     margin = 'dense',
     ...props
 }) {
-    const [showClear, setShowClear] = useState(false);
     const classes = useStyles({ classes: classesOverride });
     const translate = useTranslate();
 
@@ -66,15 +62,13 @@ function ResettableTextField({
 
     const handleFocus = useCallback(
         event => {
-            setShowClear(true);
             onFocus && onFocus(event);
         },
         [onFocus]
     );
 
     const handleBlur = useCallback(
         event => {
-            setShowClear(false);
             onBlur && onBlur(event);
         },
         [onBlur]
@@ -90,46 +84,102 @@ function ResettableTextField({
         ...restClasses
     } = classes;
 
-    return (
-        <MuiTextField
-            classes={restClasses}
-            value={value}
-            InputProps={{
-                classes:
-                    props.select && variant === 'filled'
-                        ? { adornedEnd: inputAdornedEnd }
-                        : {},
-                endAdornment: resettable && value && (
+    const { endAdornment, ...InputPropsWithoutEndAdornment } = InputProps || {};
+
+    if (clearAlwaysVisible && endAdornment) {
+        throw new Error(
+            'ResettableTextField cannot display both an endAdornment and a clear button always visible'
+        );
+    }
+
+    const getEndAdornment = () => {
+        if (!resettable) {
+            return endAdornment;
+        } else if (!value) {
+            if (clearAlwaysVisible) {
+                // show clear button, inactive
+                return (
                     <InputAdornment
                         position="end"
                         classes={{
                             root: props.select ? selectAdornment : null,
                         }}
                     >
                         <IconButton
-                            className={classNames(clearButton, {
-                                [visibleClearButton]:
-                                    clearAlwaysVisible || showClear,
-                            })}
+                            className={clearButton}
                             aria-label={translate(
                                 'ra.action.clear_input_value'
                             )}
                             title={translate('ra.action.clear_input_value')}
                             disableRipple
-                            onClick={handleClickClearButton}
-                            onMouseDown={handleMouseDownClearButton}
-                            disabled={disabled}
+                            disabled={true}
                         >
                             <ClearIcon
-                                className={classNames(clearIcon, {
-                                    [visibleClearIcon]:
-                                        clearAlwaysVisible || showClear,
-                                })}
+                                className={classNames(
+                                    clearIcon,
+                                    visibleClearIcon
+                                )}
                             />
                         </IconButton>
                     </InputAdornment>
-                ),
-                ...InputProps,
+                );
+            } else {
+                if (endAdornment) {
+                    return endAdornment;
+                } else {
+                    // show spacer
+                    return (
+                        <InputAdornment
+                            position="end"
+                            classes={{
+                                root: props.select ? selectAdornment : null,
+                            }}
+                        >
+                            <span className={clearButton}>&nbsp;</span>
+                        </InputAdornment>
+                    );
+                }
+            }
+        } else {
+            // show clear
+            return (
+                <InputAdornment
+                    position="end"
+                    classes={{
+                        root: props.select ? selectAdornment : null,
+                    }}
+                >
+                    <IconButton
+                        className={clearButton}
+                        aria-label={translate('ra.action.clear_input_value')}
+                        title={translate('ra.action.clear_input_value')}
+                        disableRipple
+                        onClick={handleClickClearButton}
+                        onMouseDown={handleMouseDownClearButton}
+                        disabled={disabled}
+                    >
+                        <ClearIcon
+                            className={classNames(clearIcon, {
+                                [visibleClearIcon]: clearAlwaysVisible || value,
+                            })}
+                        />
+                    </IconButton>
+                </InputAdornment>
+            );
+        }
+    };
+
+    return (
+        <MuiTextField
+            classes={restClasses}
+            value={value}
+            InputProps={{
+                classes:
+                    props.select && variant === 'filled'
+                        ? { adornedEnd: inputAdornedEnd }
+                        : {},
+                endAdornment: getEndAdornment(),
+                ...InputPropsWithoutEndAdornment,
             }}
             disabled={disabled}
             variant={variant}

diff --git a/packages/ra-ui-materialui/src/input/SearchInput.tsx b/packages/ra-ui-materialui/src/input/SearchInput.tsx
@@ -23,6 +23,7 @@ const SearchInput: FunctionComponent<
         <TextInput
             hiddenLabel
             label=""
+            resettable
             placeholder={translate('ra.action.search')}
             InputProps={{
                 endAdornment: (