Add newOptionPosition to configure whether to append or prepend the new option to the listbox when allowNew is enabled, resolves #77

Author: i-like-robots

readme.md

@@ -86,6 +86,7 @@ function CountrySelector() {
 - [`isDisabled`](#isDisabled-optional)
 - [`isInvalid`](#isInvalid-optional)
 - [`labelText`](#labelText-optional)
+- [`newOptionPosition`](#newOptionPosition-optional)
 - [`newOptionText`](#newOptionText-optional)
 - [`noOptionsText`](#noOptionsText-optional)
 - [`onAdd`](#onAdd-required)
@@ -196,6 +197,10 @@ Marks the input as invalid. When true this should be used along with the `ariaEr
 
 The label text used to describe the component and input. _Please note_ that the label is visually hidden with CSS in the example code. Defaults to: `"Select tags"`.
 
+#### newOptionPosition (optional)
+
+The position of the option shown when the `allowNew` prop is enabled, either `"first"` or `"last"`. Defaults to `"last"`.
+
 #### newOptionText (optional)
 
 The option text shown when the `allowNew` prop is enabled. The placeholder `%value%` will be replaced by the current input value. Defaults to `"Add %value%"`.

src/components/ReactTags.tsx

@@ -80,6 +80,7 @@ type ReactTagsProps = {
   isDisabled?: boolean
   isInvalid?: boolean
   labelText?: string
+  newOptionPosition?: 'first' | 'last'
   newOptionText?: string
   noOptionsText?: string
   onAdd: OnAdd
@@ -125,6 +126,7 @@ function ReactTags(
     isDisabled = false,
     isInvalid = false,
     labelText = 'Select tags',
+    newOptionPosition = 'last',
     newOptionText = 'Add %value%',
     noOptionsText = 'No options found for %value%',
     onAdd,
@@ -162,6 +164,7 @@ function ReactTags(
     activateFirstOption,
     allowNew,
     collapseOnSelect,
+    newOptionPosition,
     newOptionText,
     noOptionsText,
     onAdd,

src/hooks/useManager.ts

@@ -42,6 +42,7 @@ export type ManagerProps = {
   activateFirstOption: boolean
   allowNew: boolean
   collapseOnSelect: boolean
+  newOptionPosition: 'first' | 'last'
   newOptionText: string
   noOptionsText: string
   onAdd: OnAdd
@@ -66,6 +67,7 @@ export function useManager({
   activateFirstOption,
   allowNew,
   collapseOnSelect,
+  newOptionPosition,
   newOptionText,
   noOptionsText,
   onAdd,
@@ -91,7 +93,9 @@ export function useManager({
 
     if (value) {
       if (allowNew) {
-        opts.push({
+        const method = newOptionPosition === 'first' ? 'unshift' : 'push'
+
+        opts[method]({
           disabled: onValidate ? !onValidate(value) : false,
           label: newOptionText,
           value: NewOptionValue,
@@ -108,7 +112,16 @@ export function useManager({
     }
 
     return opts
-  }, [allowNew, newOptionText, noOptionsText, onValidate, suggestions, suggestionsTransform, value])
+  }, [
+    allowNew,
+    newOptionPosition,
+    newOptionText,
+    noOptionsText,
+    onValidate,
+    suggestions,
+    suggestionsTransform,
+    value,
+  ])
 
   const optionIndex = lastActiveOption ? findTagIndex(lastActiveOption, options) : -1
   const activeIndex = activateFirstOption ? Math.max(optionIndex, 0) : optionIndex

src/test/ReactTags.test.tsx

@@ -760,7 +760,25 @@ describe('React Tags Autocomplete', () => {
 
     it('displays the new tag option', async () => {
       await userEvent.type(harness.input, 'blah')
-      expect(screen.queryByText('Add blah'))
+      expect(harness.options[0].textContent).toBe('Add blah')
+    })
+
+    it('displays new tag option text with configured text', async () => {
+      harness.rerender({ newOptionText: 'Create "%value%"' })
+      await userEvent.type(harness.input, 'blah')
+      expect(harness.options[0].textContent).toBe('Create "blah"')
+    })
+
+    it('displays the new tag option first in the option list', async () => {
+      harness.rerender({ newOptionPosition: 'first', suggestions })
+      await userEvent.type(harness.input, 'En')
+      expect(harness.options[0].textContent).toBe('Add En')
+    })
+
+    it('displays the new tag option last in the option list', async () => {
+      harness.rerender({ newOptionPosition: 'last', suggestions })
+      await userEvent.type(harness.input, 'En')
+      expect(harness.options[harness.options.length - 1].textContent).toBe('Add En')
     })
 
     it('does not highlight the new tag option text', async () => {