diff --git a/src/components/TextInput.jsx b/src/components/TextInput.jsx index bc6e4a4..19d50d3 100644 --- a/src/components/TextInput.jsx +++ b/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 } : {}), - inputLabel: { - ...(label ? { shrink: true } : {}), - ...InputLabelProps, - ...slotProps?.inputLabel, - }, + ...(hasLabelProps + ? { + inputLabel: { + ...(label ? { shrink: true } : {}), + ...InputLabelProps, + ...slotProps?.inputLabel, + }, + } + : {}), htmlInput, }; diff --git a/src/components/article/ArticleSearch.jsx b/src/components/article/ArticleSearch.jsx index 1aa6267..c98a948 100644 --- a/src/components/article/ArticleSearch.jsx +++ b/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…', - label, + placeholder = '', value = null, disabled = false, size = 'small', @@ -270,13 +269,10 @@ export default class ArticleSearch extends PureComponent { : ''; return ( - { @@ -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: ( - + ), endAdornment: value ? ( @@ -321,7 +317,7 @@ export default class ArticleSearch extends PureComponent { }} edge="end" > - + ) : 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 { )} - { 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: ( - + ), endAdornment: query ? ( { this.setState({ query: '', offset: 0 }); this.runQuery('', 0); }} edge="end" > - + ) : null, @@ -815,11 +817,10 @@ export default class ArticleSearch extends PureComponent { if (params.InputProps) { return ( -