u

src/components/TextInput.jsx

@@ -110,14 +110,19 @@ export default class TextInput extends Component {
 
     const { input: _unusedInput, ...restSlotProps } = (slotProps || {});
 
+    const hasLabelProps = Boolean(label || InputLabelProps || slotProps?.inputLabel);
     const mergedSlotProps = {
       ...restSlotProps,
       ...(resolvedInputProps ? { input: resolvedInputProps } : {}),
+      ...(hasLabelProps
+        ? {
             inputLabel: {
               ...(label ? { shrink: true } : {}),
               ...InputLabelProps,
               ...slotProps?.inputLabel,
             },
+          }
+        : {}),
       htmlInput,
     };
 

src/components/article/ArticleSearch.jsx

@@ -12,7 +12,7 @@ import List from '@mui/material/List';
 import ListItemAvatar from '@mui/material/ListItemAvatar';
 import ListItemButton from '@mui/material/ListItemButton';
 import ListItemText from '@mui/material/ListItemText';
-import TextField from '@mui/material/TextField';
+import TextInput from '../TextInput';
 import Typography from '@mui/material/Typography';
 import Chip from '@mui/material/Chip';
 import Alert from '@mui/material/Alert';
@@ -255,8 +255,7 @@ export default class ArticleSearch extends PureComponent {
 
   renderTrigger() {
     const {
-      placeholder = 'Artikel suchen…',
+      placeholder = '',
-      label,
       value = null,
       disabled = false,
       size = 'small',
@@ -270,13 +269,10 @@ export default class ArticleSearch extends PureComponent {
       : '';
 
     return (
-      <TextField
+      <TextInput
         fullWidth
-        type="search"
-        autoComplete="off"
         size={size}
-        label={label}
+        placeholder={placeholder || ''}
-        placeholder={placeholder || 'Artikel suchen (EAN, Artikelnr., Name, Barcode)…'}
         value={displayValue}
         disabled={disabled}
         onClick={() => {
@@ -288,15 +284,15 @@ export default class ArticleSearch extends PureComponent {
             if (!disabled) this.handleOpenDialog();
           }
         }}
+        readOnly
         slotProps={{
-          htmlInput: {
-            autoCapitalize: 'off',
-            autoCorrect: 'off',
-          },
           input: {
+            notched: false,
             readOnly: true,
             sx: {
-              height: 40,
+              '& .MuiOutlinedInput-notchedOutline legend': {
+                display: 'none',
+              },
               cursor: disabled ? 'default' : 'pointer',
               textOverflow: 'ellipsis',
               '& input': {
@@ -306,7 +302,7 @@ export default class ArticleSearch extends PureComponent {
             },
             startAdornment: (
               <InputAdornment position="start">
-                <SearchIcon color="action" />
+                <SearchIcon fontSize="small" color="action" />
               </InputAdornment>
             ),
             endAdornment: value ? (
@@ -321,7 +317,7 @@ export default class ArticleSearch extends PureComponent {
                   }}
                   edge="end"
                 >
-                  <CloseIcon sx={{ fontSize: 18 }} />
+                  <CloseIcon sx={{ fontSize: 16 }} />
                 </IconButton>
               </InputAdornment>
             ) : null,
@@ -337,7 +333,7 @@ export default class ArticleSearch extends PureComponent {
 
   renderListContent() {
     const {
-      placeholder = 'Artikel nach SKU, Name oder EAN suchen…',
+      placeholder = '',
       autoFocus = true,
       actionLabel = 'Auswählen',
     } = this.props;
@@ -376,12 +372,12 @@ export default class ArticleSearch extends PureComponent {
         )}
 
         <Box ref={this.headerRef} sx={{ flexShrink: 0 }}>
-          <TextField
+          <TextInput
             autoFocus={autoFocus}
             fullWidth
-            type="search"
+            size="small"
-            autoComplete="off"
+            readOnly={false}
-            placeholder={placeholder || 'Artikel suchen (EAN, Artikelnr., Name, Barcode)…'}
+            placeholder={placeholder || ''}
             value={query}
             onChange={(e) => {
               const val = e.target.value;
@@ -389,35 +385,41 @@ export default class ArticleSearch extends PureComponent {
               this.runQuery(val, 0);
             }}
             onKeyDown={(e) => {
-              if (e.key === 'Enter' && results.length > 0) {
+              if (e.key === 'Escape' && query) {
+                e.preventDefault();
+                this.setState({ query: '', offset: 0 });
+                this.runQuery('', 0);
+              } else if (e.key === 'Enter' && results.length > 0) {
                 e.preventDefault();
                 this.handleSelectArticle(results[0]);
               }
             }}
             disabled={Boolean(busySku)}
             slotProps={{
-              htmlInput: {
-                autoCapitalize: 'off',
-                autoCorrect: 'off',
-              },
               input: {
-                sx: { height: 40 },
+                notched: false,
+                sx: {
+                  '& .MuiOutlinedInput-notchedOutline legend': {
+                    display: 'none',
+                  },
+                },
                 startAdornment: (
                   <InputAdornment position="start">
-                    <SearchIcon color="action" />
+                    <SearchIcon fontSize="small" color="action" />
                   </InputAdornment>
                 ),
                 endAdornment: query ? (
                   <InputAdornment position="end">
                     <IconButton
                       size="small"
+                      aria-label="Eingabe leeren"
                       onClick={() => {
                         this.setState({ query: '', offset: 0 });
                         this.runQuery('', 0);
                       }}
                       edge="end"
                     >
-                      <CloseIcon sx={{ fontSize: 18 }} />
+                      <CloseIcon sx={{ fontSize: 16 }} />
                     </IconButton>
                   </InputAdornment>
                 ) : null,
@@ -815,11 +817,10 @@ export default class ArticleSearch extends PureComponent {
 
           if (params.InputProps) {
             return (
-              <TextField
+              <TextInput
                 {...params}
                 autoFocus={autoFocus}
-                label={label}
+                placeholder={placeholder || ''}
-                placeholder={placeholder}
                 InputProps={{
                   ...params.InputProps,
                   startAdornment,
@@ -830,11 +831,10 @@ export default class ArticleSearch extends PureComponent {
           }
 
           return (
-            <TextField
+            <TextInput
               {...params}
               autoFocus={autoFocus}
-              label={label}
+              placeholder={placeholder || ''}
-              placeholder={placeholder}
               slotProps={{
                 ...params.slotProps,
                 input: {

src/components/manifest/ArticleSearchDialog.jsx

@@ -50,7 +50,6 @@ export default class ArticleSearchDialog extends PureComponent {
     const { open, onClose, line } = this.props;
     const { assigningSku, error } = this.state;
     const rawSku = line?.sku != null ? String(line.sku).trim() : '';
-    const initialQuery = line?.name?.trim() || line?.sku?.trim() || '';
 
     return (
       <Dialog
@@ -131,7 +130,6 @@ export default class ArticleSearchDialog extends PureComponent {
           <ArticleSearch
             mode="list"
             autoFocus
-            initialQuery={initialQuery}
             allowParent={false}
             busySku={assigningSku}
             actionLabel={assigningSku ? 'Zuordnen…' : 'Zuordnen'}