webscopeio / react-textarea-autocomplete

📝 React component implements configurable GitHub's like textarea autocomplete.
MIT License
451 stars 80 forks source link

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

Open japrogramer opened 5 years ago

japrogramer commented 5 years ago

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.

japrogramer commented 5 years ago

was able to work around it with ..

var lastIndex = token.lastIndexOf('#')
var sanitized_token = token.slice(lastIndex + 1)
japrogramer commented 5 years ago

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.

japrogramer commented 5 years ago

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

jukben commented 5 years ago

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?🙏

japrogramer commented 4 years ago

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

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