feature(Select): flag to put create option at top of typeahead (#8165)

patternfly · Oct 12, 2022 · 91ee855 · 91ee855
1 parent 5daeed5
commit 91ee855
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 1 deletion.
diff --git 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<SelectProps & OUIAProps, SelectState
     isDisabled: false,
     hasPlaceholderStyle: false,
     isCreatable: false,
+    isCreateOptionOnTop: false,
     validated: 'default',
     'aria-label': '',
     'aria-labelledby': '',
@@ -433,6 +436,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     const {
       onFilter,
       isCreatable,
+      isCreateOptionOnTop,
       onCreateOption,
       createText,
       noResultsFoundText,
@@ -542,7 +546,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
             } as SelectOptionObject)
           : newValue;
 
-        typeaheadFilteredChildren.push(
+        const createSelectOption = (
           <SelectOption
             key={`create ${newValue}`}
             value={newOptionValue}
@@ -551,6 +555,12 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
             {createText} "{newValue}"
           </SelectOption>
         );
+
+        if (isCreateOptionOnTop) {
+          typeaheadFilteredChildren.unshift(createSelectOption);
+        } else {
+          typeaheadFilteredChildren.push(createSelectOption);
+        }
       }
     }
 
@@ -1020,6 +1030,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       footer,
       loadingVariant,
       isCreateSelectOptionObject,
+      isCreateOptionOnTop,
       shouldResetOnSelect,
       isFlipEnabled,
       removeFindDomNode,

diff --git a/packages/react-core/src/components/Select/__tests__/Select.test.tsx b/packages/react-core/src/components/Select/__tests__/Select.test.tsx
@@ -560,3 +560,35 @@ test('applies focus styling to the create option when reached via keyboard navig
 
   expect(createOption.parentElement).toHaveClass('pf-m-focus');
 });
+
+test('appends create option to list of options', async () => {
+  const user = userEvent.setup();
+
+  render(
+    <Select variant={SelectVariant.typeahead} onToggle={() => {}} isOpen isCreatable>
+      {selectOptions}
+    </Select>
+  );
+
+  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(
+    <Select variant={SelectVariant.typeahead} onToggle={() => {}} isOpen isCreateOptionOnTop isCreatable>
+      {selectOptions}
+    </Select>
+  );
+
+  const input = screen.getByRole('textbox');
+  await user.type(input, `m`);
+
+  const createOption = screen.getAllByRole('option')[0];
+  expect(createOption).toHaveTextContent('Create "m"');
+});
diff --git 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"
         />
+        <Checkbox
+          label="isCreateOptionOnTop"
+          isChecked={this.state.isCreateOptionOnTop}
+          onChange={this.toggleCreateOptionOnTop}
+          aria-label="toggle createOptionOnTop checkbox"
+          id="toggle-create-option-on-top-typeahead"
+          name="toggle-create-option-on-top-typeahead"
+        />
         <Checkbox
           label="onCreateOption"
           isChecked={this.state.hasOnCreateOption}