Fix ResettableTextField component endAdornment prop not being applied.

marmelab · Oct 30, 2019 · cc8ea82 · cc8ea82
1 parent 9319c00
commit cc8ea82
Showing 1 changed file with 44 additions and 32 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, { Fragment, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import InputAdornment from '@material-ui/core/InputAdornment';
@@ -84,42 +84,54 @@ function ResettableTextField({
         ...restClasses
     } = classes;
 
+    const { endAdornment, ...InputPropsWithoutEndAdornment } = InputProps;
+
     return (
         <MuiTextField
             classes={restClasses}
             value={value}
             InputProps={{
-                endAdornment: resettable && value && (
-                    <InputAdornment
-                        position="end"
-                        classes={{
-                            root: props.select ? classes.selectAdornment : null,
-                        }}
-                    >
-                        <IconButton
-                            className={classNames(clearButton, {
-                                [visibleClearButton]:
-                                    clearAlwaysVisible || showClear,
-                            })}
-                            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 || showClear,
-                                })}
-                            />
-                        </IconButton>
-                    </InputAdornment>
-                ),
-                ...InputProps,
+                endAdornment:
+                    resettable && value ? (
+                        <Fragment>
+                            <InputAdornment
+                                position="end"
+                                classes={{
+                                    root: props.select
+                                        ? classes.selectAdornment
+                                        : null,
+                                }}
+                            >
+                                <IconButton
+                                    className={classNames(clearButton, {
+                                        [visibleClearButton]:
+                                            clearAlwaysVisible || showClear,
+                                    })}
+                                    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 || showClear,
+                                        })}
+                                    />
+                                </IconButton>
+                            </InputAdornment>
+                            {endAdornment}
+                        </Fragment>
+                    ) : (
+                        endAdornment
+                    ),
+                ...InputPropsWithoutEndAdornment,
             }}
             disabled={disabled}
             variant={variant}