diff --git a/packages/react-components/src/Autocomplete/autocomplete.test.tsx b/packages/react-components/src/Autocomplete/autocomplete.test.tsx index a0874b77..adfdd603 100644 --- a/packages/react-components/src/Autocomplete/autocomplete.test.tsx +++ b/packages/react-components/src/Autocomplete/autocomplete.test.tsx @@ -172,7 +172,6 @@ describe('', () => { , ); diff --git a/packages/react-components/src/Autocomplete/autocomplete.tsx b/packages/react-components/src/Autocomplete/autocomplete.tsx index b3a7386a..1ad05b8d 100644 --- a/packages/react-components/src/Autocomplete/autocomplete.tsx +++ b/packages/react-components/src/Autocomplete/autocomplete.tsx @@ -77,10 +77,6 @@ export type AutocompleteOwnProps< * If `true`, the `input` element is required. */ required?: boolean; - /** - * If `true`, the create button element will be shown. - */ - allowCreateOption?: boolean; /** * If `true`, the `input` will indicate an error. */ @@ -101,7 +97,10 @@ export type AutocompleteOwnProps< /** * Render the tags elements. */ - renderTag?: (props: object, option: T) => React.ReactNode; + renderTag?: ( + props: ReturnType['getTagProps']>, + option: T, + ) => React.ReactNode; /** * The label to display when the tags are truncated (`limitTags`). */ @@ -461,6 +460,14 @@ export const Autocomplete = < const rootProps = getRootProps(); const popoverProps = getPopoverProps(); + const handleCreate = (event: React.SyntheticEvent) => { + if (onCreate && searchValue.length) { + onCreate(event, searchValue); + } + + popoverProps.onClose(event); + }; + const handleKeyDown = (event: React.KeyboardEvent) => { // Wait until IME is settled. if (event.which !== 229) { @@ -481,9 +488,7 @@ export const Autocomplete = < // Prevent cursor move event.preventDefault(); - if (onCreate && !groupedOptions.length) { - onCreate(event, searchValue); - } + handleCreate(event); popoverProps.onKeyDown(event); break; @@ -756,6 +761,5 @@ Autocomplete.defaultProps = { loading: false, loadingText: 'Loading...', required: false, - allowCreateOption: false, size: 'medium', };