problem when input trigger ‘@’ at middle of text

[pannz]

Just run into this components, I was developing something quite alike components as your's, and there's tough issue that when input the trigger word at the middle of text, it should be show the suggestionView, I havent not run the demo, just viewed the code, i thought the component might be helpless at this case. my solution is to diff the changed text every time to decide to show/off the suggestion view when onKeyPress listener receive the provided trigger value

no offense, just as a test case

[harshq]

If I understand you correctly, you don't want to show the suggestions panel, if the user type the trigger key in the middle of a word yea ? I can see how it could be a problem in some cases. On top of my head, what if i check the last character before the trigger key and only show the suggestions if its a space ? Probably will have to change the RegEx a bit too. Ill give it a go when i have free time. Meanwhile feel free to send a PR if you figure out a better solution.

PS: None taken mate ;) Cheers

[dhrrgn]

@pannz I was curious how it handled the trigger in the middle of a word as well. After looking at the code, it uses this regexp: \B@[a-z0-9_-]+|@ (when the trigger is @). I think this is actually a bug. This will cause it to start suggesting when the trigger is in the middle of a word (e.g. when typing an email).

@harshq I think the regexp should be changed to \\B${this.props.trigger}[a-z0-9_-]+|\\B${this.props.trigger} so that it only triggers when the trigger is preceded by a word boundary.

You could add yet another prop like triggerWithinWord or something to alow triggering within a word.

[dhrrgn]

@harshq Regarding your comment "what if i check the last character before the trigger key and only show the suggestions if its a space": This is unnecessary if you change the regexp to what I suggest above, as \B matches a non-word boundary, which means that any non-word char preceding the trigger will cause a match.

A note about using \B: This means that using a word character as the trigger, will actually cause the opposite to happen. This means that if the trigger is something like e, it would only match when the e is preceded by a word char. Example He would match, but Hi e would not, because there was a space before it. No good way around this except switching it based on the trigger.

Code for switching the boundary type:

const boundary = !!this.props.trigger.match(/\w/) ? 'b' : 'B';
const pattern = new RegExp(`\\${boundary}${this.props.trigger}[a-z0-9_-]+|\\${boundary}${this.props.trigger}`, `gi`);

[harshq]

Hey @dhrrgn. Really appreciate your suggestions and the input. I couldn't find time to work on this yet. Will try to do it today itself. Cheers

[prashen]

I am still getting this issue. While putting @ in middle it's not working

[singhaishwarya]

If I understand you correctly, you don't want to show the suggestions panel, if the user type the trigger key in the middle of a word yea ? I can see how it could be a problem in some cases. On top of my head, what if i check the last character before the trigger key and only show the suggestions if its a space ? Probably will have to change the RegEx a bit too. Ill give it a go when i have free time. Meanwhile feel free to send a PR if you figure out a better solution.

PS: None taken mate ;) Cheers

when input the trigger word at the middle of text, it should be show the suggestionView

@harshq I think you misunderstood @pannz...he does want to show the suggestions panel if the user types the trigger key in the middle of a word/sentence.