webscopeio/react-textarea-autocomplete

implementing hashtags with spaces. How do i stop the Auto completing ive already tried hitting Enter?

japrogramer opened this issue · 5 comments

Hello I am trying to implement hashtags

                  "#": {
                    allowWhitespace: true,
                    dataProvider: async token => {
                      console.log(token)
                      const names = await client.query({
                          query: GroupAutoSugQuery,
                          variables: { token }
                        }).then( result => {
                          const sug = result.data.groupSug.map(u => ({ name: u.name}))
                          return sug; });

                     return names;
                    },
                    component: GroupItem,
                    output: (item, trigger) => `${trigger}${item.name.replace(/ /g, "_")}`
                  }

but when i type in the textarea something like. ..

#new_pages #New_from_modal #Coco

the console logs this on the last call

coco
new_pages #New_from_modal #Coco

It seems that the tag is sometimes being passed the coco part as a token
but on other parts the whole line ... which i do not want.

But i have to allow white spaces because groups can have white spaces.

was able to work around it with ..

var lastIndex = token.lastIndexOf('#')
var sanitized_token = token.slice(lastIndex + 1)

Re-opening .. because i don't think the default behavior makes sense.
Also how can i escape the auto complete functionality .. see after i hit enter .. it keeps trying to complete.

Perhaps having an exit character to tell the component to stop trying to auto complete.
something like ';'

Thanks for bug report. Could you please create codesandbox (for example basend on this https://codesandbox.io/s/k34153yp0v) as repro? Expected behavior, actual behavior?🙏

@jukben I have recreated the bug .. https://codesandbox.io/s/reacttextareaautocomplete-tw12d

its the output: and the allowWhitespaces that together create the bug.