diff --git a/src/routes/artikel/marken.jsx b/src/routes/artikel/marken.jsx index 67fdd3d..2335a6d 100644 --- a/src/routes/artikel/marken.jsx +++ b/src/routes/artikel/marken.jsx @@ -22,6 +22,18 @@ import { } from '../../colors'; class ArtikelMarkenSearchField extends PureComponent { + constructor(props) { + super(props); + this.state = { input: '' }; + } + + onInputChange(input) { + this.setState({ input }); + } + + clearInput() { + this.setState({ input: '' }); + } render() { const { inputRef } = this.props; @@ -40,8 +52,8 @@ class ArtikelMarkenSearchField extends PureComponent { sx={{ maxWidth: 520, flexGrow: 1 }} autoFocus autoComplete="off" - value={''} - onChange={() => { }} + value={this.state.input} + onChange={(e) => this.onInputChange(e.target.value)} slotProps={{ htmlInput: { autoCapitalize: 'off', @@ -58,7 +70,7 @@ class ArtikelMarkenSearchField extends PureComponent { { }} + onClick={() => this.clearInput()} onMouseDown={(e) => e.preventDefault()} aria-label="Suche löschen" >