InputAdronment added if resettable prop is pass when value is not set…

… and there is not endAdornment.
marmelab · Nov 8, 2019 · d14e396 · d14e396
1 parent 3a1c8a1
commit d14e396
Showing 1 changed file with 30 additions and 33 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, { Fragment, useState, useCallback } from 'react';
+import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import InputAdornment from '@material-ui/core/InputAdornment';
@@ -100,49 +100,46 @@ function ResettableTextField({
                 classes: { adornedEnd: props.select ? inputAdornedEnd : null },
                 endAdornment:
                     resettable && value ? (
-                        <Fragment>
-                            <InputAdornment
-                                position="end"
-                                classes={{
-                                    root: props.select ? selectAdornment : null,
-                                }}
+                        <InputAdornment
+                            position="end"
+                            classes={{
+                                root: props.select ? 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}
                             >
-                                <IconButton
-                                    className={classNames(clearButton, {
-                                        [visibleClearButton]:
+                                <ClearIcon
+                                    className={classNames(clearIcon, {
+                                        [visibleClearIcon]:
                                             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>
-                        </Fragment>
+                                />
+                            </IconButton>
+                        </InputAdornment>
                     ) : (
-                        endAdornment || (
+                        endAdornment ||
+                        (resettable && (
                             <InputAdornment
                                 position="end"
                                 classes={{
                                     root: props.select ? selectAdornment : null,
                                 }}
                             >
-                                <IconButton />
+                                <IconButton disabled />
                             </InputAdornment>
-                        )
+                        ))
                     ),
                 ...InputPropsWithoutEndAdornment,
             }}