diff --git a/src/SingleLineTextEdit.jsx b/src/SingleLineTextEdit.jsx
index 828f57d..cae558a 100644
--- a/src/SingleLineTextEdit.jsx
+++ b/src/SingleLineTextEdit.jsx
@@ -1,5 +1,9 @@
import { Component } from 'react';
import TextField from '@mui/material/TextField';
+import InputAdornment from '@mui/material/InputAdornment';
+import IconButton from '@mui/material/IconButton';
+import SearchIcon from '@mui/icons-material/Search';
+import ClearIcon from '@mui/icons-material/Clear';
/**
* Centralized single-line text field with the same outlined look everywhere.
@@ -13,7 +17,7 @@ import TextField from '@mui/material/TextField';
* @prop {string} value - Controlled field value.
* @prop {(nextValue: string) => void} onChange - Called with the new string value (not an event). Not called while `readOnly`.
* @prop {React.Ref} [inputRef] - Ref forwarded to the inner input (used by EditablePanelTile to focus on edit).
- * @prop {ReactNode} [label=Name] - Outlined field label.
+ * @prop {ReactNode} [label] - Outlined field label.
* @prop {boolean} [readOnly=false] - When true, the input is read-only: non-editable, not tabbable, spellcheck off, and onChange is suppressed.
* @prop {boolean} [disabled=false] - Passed to TextField — disables the field.
* @prop {boolean} [required=false] - Passed to TextField — marks the field required.
@@ -21,6 +25,8 @@ import TextField from '@mui/material/TextField';
* @prop {boolean} [autoFocus=false] - TextField autoFocus prop.
* @prop {string} [autoComplete=off] - TextField autoComplete prop.
* @prop {'small' | 'medium'} [size] - TextField size prop.
+ * @prop {boolean} [search=false] - When true, displays a search icon start adornment.
+ * @prop {boolean} [clear=false] - When true and value is non-empty, displays a clear button end adornment.
* @prop {object} [slotProps] - MUI slotProps, merged (input/htmlInput are augmented for readOnly/spellCheck/tabIndex).
* @prop {object} [sx] - Extra styles passed to TextField.
* @prop {any} [otherProps] - Any remaining TextField props (helperText, etc.) are spread onto TextField.
@@ -43,11 +49,38 @@ class SingleLineTextEdit extends Component {
size,
fullWidth = true,
required = false,
+ search = false,
+ clear = false,
sx,
slotProps,
...rest
} = this.props;
+ let startAdornment = slotProps?.input?.startAdornment;
+ if (search && startAdornment === undefined) {
+ startAdornment = (
+
+
+
+ );
+ }
+
+ let endAdornment = slotProps?.input?.endAdornment;
+ if (clear && endAdornment === undefined) {
+ endAdornment = (value && !readOnly && !disabled) ? (
+
+ onChange?.('')}
+ onMouseDown={(e) => e.preventDefault()}
+ aria-label="Eingabe Löschen"
+ >
+
+
+
+ ) : null;
+ }
+
return (
{
- if (!readOnly) onChange(event.target.value);
+ if (!readOnly) onChange?.(event.target.value);
}}
autoFocus={autoFocus}
autoComplete={autoComplete}
@@ -67,6 +100,8 @@ class SingleLineTextEdit extends Component {
...slotProps,
input: {
readOnly,
+ ...(startAdornment !== undefined ? { startAdornment } : {}),
+ ...(endAdornment !== undefined ? { endAdornment } : {}),
...slotProps?.input,
},
htmlInput: {