u

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 = (
+        <InputAdornment position="start">
+          <SearchIcon color="action" />
+        </InputAdornment>
+      );
+    }
+
+    let endAdornment = slotProps?.input?.endAdornment;
+    if (clear && endAdornment === undefined) {
+      endAdornment = (value && !readOnly && !disabled) ? (
+        <InputAdornment position="end">
+          <IconButton
+            size="small"
+            onClick={() => onChange?.('')}
+            onMouseDown={(e) => e.preventDefault()}
+            aria-label="Eingabe Löschen"
+          >
+            <ClearIcon fontSize="small" />
+          </IconButton>
+        </InputAdornment>
+      ) : null;
+    }
+
     return (
       <TextField
         inputRef={inputRef}
@@ -59,7 +92,7 @@ class SingleLineTextEdit extends Component {
         value={value}
         disabled={disabled}
         onChange={(event) => {
-          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: {