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',
};