diff --git a/docs/pages/api/autocomplete.md b/docs/pages/api/autocomplete.md index a56335724980d0..416c04de82d953 100644 --- a/docs/pages/api/autocomplete.md +++ b/docs/pages/api/autocomplete.md @@ -55,6 +55,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | inputValue | string | | The input value. | | ListboxComponent | elementType | 'ul' | The component used to render the listbox. | | ListboxProps | object | | Props applied to the Listbox element. | +| ListOptionComponent | elementType | 'li' | The component used to render the list item option.
This will override `renderOption` as well as `getOptionLabel`. It allows greater control of the option rendering. | | loading | bool | false | If `true`, the component is in a loading state. | | loadingText | node | 'Loading…' | Text to display when in a loading state.
For localization purposes, you can use the provided [translations](/guides/localization/). | | multiple | bool | false | If `true`, `value` must be an array and the menu will support multiple selections. | diff --git a/docs/src/pages/components/autocomplete/Playground.js b/docs/src/pages/components/autocomplete/Playground.js index 66a39f1b0be2cd..c8f04aef54e43c 100644 --- a/docs/src/pages/components/autocomplete/Playground.js +++ b/docs/src/pages/components/autocomplete/Playground.js @@ -1,7 +1,10 @@ /* eslint-disable no-use-before-define */ import React from 'react'; import TextField from '@material-ui/core/TextField'; +import Tooltip from '@material-ui/core/Tooltip'; import Autocomplete from '@material-ui/lab/Autocomplete'; +import Info from '@material-ui/icons/Info'; +import Button from '@material-ui/core/Button'; export default function Playground() { const defaultProps = { @@ -126,6 +129,36 @@ export default function Playground() { )} /> + year > 2000} + ListOptionComponent={({ title, year, ...props }) => { + if (year > 2000) { + return ( + +
+ +
+
+ ); + } + + return ( + + ); + }} + renderInput={params => ( + + )} + /> ); } diff --git a/docs/src/pages/components/autocomplete/Playground.tsx b/docs/src/pages/components/autocomplete/Playground.tsx index c3cae2e6f196b8..3d80442809e6b2 100644 --- a/docs/src/pages/components/autocomplete/Playground.tsx +++ b/docs/src/pages/components/autocomplete/Playground.tsx @@ -1,7 +1,10 @@ /* eslint-disable no-use-before-define */ import React from 'react'; import TextField from '@material-ui/core/TextField'; +import Tooltip from '@material-ui/core/Tooltip'; import Autocomplete from '@material-ui/lab/Autocomplete'; +import Info from '@material-ui/icons/Info'; +import Button, { ButtonProps } from '@material-ui/core/Button'; export default function Playground() { const defaultProps = { @@ -124,6 +127,40 @@ export default function Playground() { )} /> + year > 2000} + ListOptionComponent={({ + title, + year, + ...props + }: T & Partial) => { + if (year > 2000) { + return ( + +
+ +
+
+ ); + } + + return ( + + ); + }} + renderInput={params => ( + + )} + /> ); } diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts b/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts index 90e798807e3f08..ecb1674a63a44e 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts @@ -82,6 +82,12 @@ export interface AutocompleteProps * Props applied to the Listbox element. */ ListboxProps?: object; + /** + * The component used to render the list item option. + * + * This will override `renderOption` as well as `getOptionLabel`. It allows greater control of the option rendering. + */ + ListOptionComponent?: React.ComponentType & T>; /** * If `true`, the component is in a loading state. */ diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js index eebefc730138c6..63c22dd860fe45 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js @@ -248,6 +248,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) { inputValue: inputValueProp, ListboxComponent = 'ul', ListboxProps, + ListOptionComponent = 'li', loading = false, loadingText = 'Loading…', multiple = false, @@ -335,6 +336,10 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) { const renderListOption = (option, index) => { const optionProps = getOptionProps({ option, index }); + if (ListOptionComponent !== 'li') { + return ; + } + return (
  • {renderOption(option, { @@ -613,6 +618,12 @@ Autocomplete.propTypes = { * Props applied to the Listbox element. */ ListboxProps: PropTypes.object, + /** + * The component used to render the list item option. + * + * This will override `renderOption` as well as `getOptionLabel`. It allows greater control of the option rendering. + */ + ListOptionComponent: PropTypes.elementType, /** * If `true`, the component is in a loading state. */ diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js index 9b2b1e3de4d88f..2851bdbfd2455d 100644 --- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js +++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js @@ -858,6 +858,7 @@ export default function useAutocomplete(props) { return { key: index, tabIndex: -1, + disabled, role: 'option', id: `${id}-option-${index}`, onMouseOver: handleOptionMouseOver,