What are the goals?

[jtojnar]

Hi, is this version supposed to achieve feature parity with the old extension? At the moment, it looks like it is much less customizable, while the old extension was almost perfect.

For example, for selfoss, I used the following with the old extension in the introducing PR:

<ReactTags
    ref={reactTags}
    tags={source.tags}
    inputAttributes={{
        id: `tags-${sourceId}`, // For associating it with a label
        accessKey: 'g', // For quick jump
        onPaste, // I want to add a reasonable event handler but did not get to it yet.
    }}
    suggestions={tagSuggestions} // I abuse prefix field to add colour to each suggested tag
    onDelete={tagsOnDelete}
    onAddition={tagsOnAddition}
    allowNew={true}
    addOnBlur={true}
    minQueryLength={1} // Looks like the beta uses 0 now, which works for me.
    placeholderText={_('source_tags_placeholder')}
    removeButtonText={_('source_tag_remove_button_label')}
    newTagText={_('source_tags_create_new').replace('{0}', '%value%')} // This will be great.
    classNames={reactTagsClassNames}
    delimiters={['Enter', 'Tab', ',']} // Comma is much more convenient when typing on keyboard
    tagComponent={tagComponent} // Also used to add colour to tags
/>

[i-like-robots]

My goals for the rewrite are:

1. To improve accessibility. Since the original component was released there have been quite a lot of changes in assistive tech and I'd like to support them. I have added more detailed attributes to the combobox (thanks to gov.uk for their research here) and a live area which announces tag additions and removals. I'm still working on focus management with feedback from real assistive tech users.
2. To ensure the component behaves closely to the native datalist element. A number of behaviours have been accurately implemented to more closely mimic the native elements in a wider range of interactions. For example the up/down keys will only expand the listbox based on cursor position, the active option is changed on mousedown, the active options wrap and scroll more like the native element, and the active option is maintained whilst editing the input value.
3. From a purely technical point of view, I have wanted to refactor most component state into a single reducer and use context for a long time. I find it much easier to rationalise the state in this way and this is largely responsible for enabling point 2.
4. To have fun, it's been a useful exercise to improve my knowledge. Feature parity is not a goal, any features I don't like or don't use may not be ported. v6 won't be going anywhere for a good while so I am not going to encourage anybody to bump to the latest version if they don't want to, v6 is still good.

[muyiwaoyeniyi]

@i-like-robots Thanks for the package!

It would be good to have some feature parity so existing users can migrate to this version (which supports react 18). I see that some props aren't available (yet?) like addOnBlur, delimiters, minQueryLength etc.

Please would it be possible to have these options in the new version?

[i-like-robots]

@muyiwaoyeniyi there is some discussion about delimiters here: #12

Another issue has been raised for minQueryLength here: #15

[muyiwaoyeniyi]

@i-like-robots Thanks. I will take a look.