u

src/routes/artikel.jsx

@@ -329,6 +329,10 @@ class ArtikelSearchPage extends Component {
     }).catch(() => {});
   };
 
+  handleClearInput = () => {
+    this.handleInputChange({ target: { value: '' } });
+  };
+
   fetchResults = () => {
     const { target, filter, offset } = queryFromParams(this.props.searchParams);
     const { pageSize } = this.state;
@@ -422,9 +426,8 @@ class ArtikelSearchPage extends Component {
           <TextField
             sx={{ maxWidth: 520, flexGrow: 1 }}
             autoFocus
-            type="search"
             autoComplete="off"
-            placeholder="Artikel suchen (EAN, Artikelnr., Name, Barcode)…"
+            placeholder="(EAN, SKU, Name)"
             value={input}
             onChange={this.handleInputChange}
             slotProps={{
@@ -439,21 +442,33 @@ class ArtikelSearchPage extends Component {
                     <SearchIcon color="action" />
                   </InputAdornment>
                 ),
+                endAdornment: input ? (
+                  <InputAdornment position="end">
+                    <IconButton
+                      size="small"
+                      onClick={this.handleClearInput}
+                      onMouseDown={(e) => e.preventDefault()}
+                      title="Suche löschen"
+                      aria-label="Suche löschen"
+                    >
+                      <ClearIcon fontSize="small" />
+                    </IconButton>
+                  </InputAdornment>
+                ) : null,
               },
             }}
           />
-          {facetEntries.length > 0 && (
-            <Button
-              variant={categoryFilterOpen ? 'contained' : 'outlined'}
-              color="inherit"
-              onClick={this.toggleCategoryFilter}
-              startIcon={<FilterListIcon />}
-              endIcon={categoryFilterOpen ? <ExpandLessIcon /> : <ExpandMoreIcon />}
-              sx={{ height: 40, whiteSpace: 'nowrap', flexShrink: 0 }}
-            >
-              Kategorien
-            </Button>
-          )}
+          <Button
+            variant={categoryFilterOpen ? 'contained' : 'outlined'}
+            color="inherit"
+            disabled={facetEntries.length === 0}
+            onClick={this.toggleCategoryFilter}
+            startIcon={<FilterListIcon />}
+            endIcon={categoryFilterOpen ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+            sx={{ height: 40, whiteSpace: 'nowrap', flexShrink: 0 }}
+          >
+            Kategorien
+          </Button>
           {categories.map((catId) => {
             const label = getCategoryBreadcrumbLabel(
               catId,