allowWhitespace breaks search trigger

[haveanicedavid]

In the above, I have two triggers. One for (( (which allows whitespace), one for # (which does not). You can see when I type the (( trigger, additional input doesn't update the search, whereas using # it updates appropriately

When whitespaces are allowed, the dataProvider doesn't seem to be making subsequent search calls after the initial letter is entered.

Code in case it's relevant:

    '((': {
      allowWhitespace: true,
      dataProvider: async (token: string) => {
        const text = token.substr(1)
        const result = await searchBlocks(text)
        const parsed = result.map(({ text, id }) => {
          return { text, id }
        })
        return parsed
      },
      component: BlockItem,
      output: (item: any) => `((${item.id}))`,
    },

I can probably come up with a workaround, but still seems worth filling. Do I have something set up incorrectly?

Loving the package otherwise! Works great

[jukben]

Hey, thanks for the issue report. I'm afraid that this might be bug in allowWhitespace implementation 😞. As I remember the implementation is very clumsy. However, I won't find time to fix it anytime soon – you can try your luck tho.

[jukben]

Haha, anyway, I spent 10 mins just to double check what's the expected behavior and I realized that you are responsible for doing that "search" logic within dataProvider implementation. So I guess if you do something like and try to filter it by the token it should work just fine.

const parsed = result.map(({ text, id }) => {
          return { text, id }
        }).filter(...)

It should work just fine. Can you try it? Try to log token within the implementation – it should log it with each keystroke. Otherwise please create repro on Codesandbox (you can use this one to start with – https://codepen.io/jukben/pen/bYZqvR).

[haveanicedavid]

I'm not sure I'm following. I can change the logic within the dataProvider, however the core issue is that the provider only seems to be called once - on initial text input. So in the gif, it picks up the initial a, but no subsequent characters - putting a console log in like this:

    '((': {
      allowWhitespace: true,
      dataProvider: async (token: string) => {
        console.log('token :>> ', token)
        return ['hello']
      },
      component: BlockItem,
      output: (item: any) => `((${item.id}))`,
    },

... only fires token once.

I'll try to dig into it a bit later this weekend

[jukben]

You are right. I was able to reproduce it. I will try to find time to look at it. The codebase is extremely rusty by this time, so I already feel the adrenaline rush. 😅

[jukben]

I was able to find out that this issue emerges when you use multichar trigger like ((

[jukben]

Deployed fix in https://github.com/webscopeio/react-textarea-autocomplete/releases/tag/v4.7.1

Please, test it if it works for your use-case and enjoy. 🚀

[haveanicedavid]

Apologies for a very delayed reply - I'm normally good at checking git notifications but missed this!

I actually switched to use a different library for my feature but ultimately circled back to yours after that route was causing way more of a headache - your fix works perfectly!

Loving the library. Thank you 🙏