React-tags: V6

Created on 14 Nov 2017 · 11Comments · Source: i-like-robots/react-tags

This is a catch-all issue tracking V6 changes and bug fixes.

[x] >= React 16 (#113)
[x] Remove autofocus option for a11y reasons
[x] Merge delimiters and delimiterChars options using KeyboardEvent.key
[x] event callbacks should be re-named from handleX to onX (#91)
[x] handleInputChange should be re-named onInput
[x] Make listBoxId configurable
[x] Support ES6 modules, pkg.module (#112)
[x] Refactor option filtering into top-level component (#115)
[x] Allow all text to be configurable (CC #154)
[x] Custom suggestion component (CC #117)
[x] Refactor class names out of state to avoid creating new objects on each prop change (#147)
[x] Remove clearInputOnDelete option and don't clear the input when deleting a tag (#155)

Source

i-like-robots

All 11 comments

Is there a plan to release this?

mklopets on 23 Jul 2018

😕1

Would love to utilize the custom suggestion component! Will 6.0 be released?

drichar on 1 May 2019

I've published [email protected] to npm, please give it a try and let me know if there are any issues!

i-like-robots on 1 May 2019

@i-like-robots Any plan to refactor using Hooks? Maybe starting with examples?

theJian on 16 May 2019

@theJian No not yet. Starting with the examples sounds like a fine idea though.

i-like-robots on 16 May 2019

When do you plan to merge this? :)

filippofilip95 on 23 Aug 2019

Unfortunately I've not received any feedback on the beta release so I have been reluctant to release it. If you would like to try it then there are instructions in the readme 😄 :

https://github.com/i-like-robots/react-tags/tree/6.0#installation

i-like-robots on 23 Aug 2019

👍1

Thanks for the quick reply 👍 I've tested it now and it works like charm 😄 Just followed your migration instructions 🥇

Our implementation is minimal. But I can confirm that this works :)

Screen Shot 2019-08-23 at 1 23 08 PM

filippofilip95 on 23 Aug 2019

👍1

When using an async search to fetch the suggestions the component won't work correctly and will get out of sync with the suggestions provided via props.
From the code seems like it's not looking into changes from suggestions to update its internal state.

PS: Seems like the beta version is now the default version installed when you do "npm i react-tag-autocomplete". Took me a while to understand why handleInputChange was not working.

coxom on 2 Mar 2020

👍1

Thanks for the heads up about incorrect npm distribution tags @coxom, this has been corrected here.

i-like-robots on 4 Mar 2020

@coxom I solved onInput async fetch with @i-like-robots is this bug?

onInput = (query) => {
            return fetch(`/search/?q=${query}`).then(result => result.json()).then((suggestions) => {
                        this.tagsRef.current.setState({ query, options: suggestions, suggestions });

EDIT: I did some changes and I finally added support for larger result set with scroller enabled and keyUP and Down focused scroller move