diff --git a/packages/react-core/src/components/Select/Select.tsx b/packages/react-core/src/components/Select/Select.tsx index 0b5c17a9068..a4962d75a35 100644 --- a/packages/react-core/src/components/Select/Select.tsx +++ b/packages/react-core/src/components/Select/Select.tsx @@ -69,6 +69,8 @@ export interface SelectProps isDisabled?: boolean; /** Flag to indicate if the typeahead select allows new items */ isCreatable?: boolean; + /** Flag to indicate if create option should be at top of typeahead */ + isCreateOptionOnTop?: boolean; /** Flag indicating if placeholder styles should be applied */ hasPlaceholderStyle?: boolean; /** @beta Flag indicating if the creatable option should set its value as a SelectOptionObject */ @@ -226,6 +228,7 @@ export class Select extends React.Component ); + + if (isCreateOptionOnTop) { + typeaheadFilteredChildren.unshift(createSelectOption); + } else { + typeaheadFilteredChildren.push(createSelectOption); + } } } @@ -1020,6 +1030,7 @@ export class Select extends React.Component { + const user = userEvent.setup(); + + render( + + ); + + const input = screen.getByRole('textbox'); + await user.type(input, `m`); + + const createOption = screen.getAllByRole('option')[3]; + expect(createOption).toHaveTextContent('Create "m"'); +}); + +test('prepends create option to list of options if isCreateOptionOnTop flag is set', async () => { + const user = userEvent.setup(); + + render( + + ); + + const input = screen.getByRole('textbox'); + await user.type(input, `m`); + + const createOption = screen.getAllByRole('option')[0]; + expect(createOption).toHaveTextContent('Create "m"'); +}); \ No newline at end of file diff --git a/packages/react-core/src/components/Select/examples/Select.md b/packages/react-core/src/components/Select/examples/Select.md index dd1a871dff0..628fcf0a5f5 100644 --- a/packages/react-core/src/components/Select/examples/Select.md +++ b/packages/react-core/src/components/Select/examples/Select.md @@ -1209,6 +1209,7 @@ class TypeaheadSelectInput extends React.Component { selected: null, isDisabled: false, isCreatable: false, + isCreateOptionOnTop: false, isInputValuePersisted: false, isInputFilterPersisted: false, hasOnCreateOption: false, @@ -1258,6 +1259,12 @@ class TypeaheadSelectInput extends React.Component { }); }; + this.toggleCreateOptionOnTop = checked => { + this.setState({ + isCreateOptionOnTop: checked + }); + }; + this.toggleCreateNew = checked => { this.setState({ hasOnCreateOption: checked @@ -1289,6 +1296,7 @@ class TypeaheadSelectInput extends React.Component { selected, isDisabled, isCreatable, + isCreateOptionOnTop, hasOnCreateOption, isInputValuePersisted, isInputFilterPersisted, @@ -1315,6 +1323,7 @@ class TypeaheadSelectInput extends React.Component { placeholderText="Select a state" isDisabled={isDisabled} isCreatable={isCreatable} + isCreateOptionOnTop={isCreateOptionOnTop} onCreateOption={(hasOnCreateOption && this.onCreateOption) || undefined} shouldResetOnSelect={resetOnSelect} > @@ -1343,6 +1352,14 @@ class TypeaheadSelectInput extends React.Component { id="toggle-creatable-typeahead" name="toggle-creatable-typeahead" /> +