-
Notifications
You must be signed in to change notification settings - Fork 80
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Method for renderSuggestions is called twice on every input causing flicker in the rendering #55
Comments
@Punit-Vajpeyi where do you store lastKeyword? In your local state? This feels like something that should be prevented in the library (the first call with the empty keyword). |
Hi there, We're reproducing the exact same thing as @krismeld has described - the A temporary workaround we're using is to throttle the incoming
|
This is still an issue. @domasn workaround fixed it for me temporarily. However, this is not ideal. |
Just leaving this here. The bug is caused by the dependency on selection here:
Selection is maintained in the state so by the time selection updates the parts dependency may not have been recalculated, which causes getMentionPartSuggestionKeywords to return undefined. An ugly but working solution is:
|
Add `onMentionsChange` property to the `MentionInput` component. It allows to render suggestions outside `MentionInput` component — #65, #69, #75. Fix double trigger of suggestions render. Now we are trigger this only after selection change — #55. Format `utils.ts` using prettier. BREAKING CHANGES Remove `containerStyle` prop from the `MentionInput` component. Remove `inputRef` prop from the `MentionInput` component. Use traditional `ref` now. Remove `renderSuggestions` and `isBottomMentionSuggestionsRender` from the Part type. Rename `MentionSuggestionsProps` type to `SuggestionsProvidedProps`. Rename `onSuggestionPress` to `onSelect` in the type.
Will this work if the trigger is in the middle of the sentence for example . |
https://gist.github.com/Aryk/a1699136cda19cfc730f0e7e8023a5c1 PS Looking to hire a Sr. React Native dev. |
Thank you all for the productive discussion and ideas. Indeed, we are observing a double render because we handle the change in state of both the text and selection, which can be critical in some cases. For example, when the user does not change the text, but instead just moves the cursor to another place, and we need to show relevant suggestions (see video). In such a case, the truly ingenious solution from @Aryk of storing the selection state in Simulator.Screen.Recording.-.iPhone.14.Pro.-.2023-07-13.at.13.26.19.mp4To make matters worse, in A compromise might be to use the custom const useThrottledKeyword = (keyword: string | undefined, delay = 10) => {
const [throttledKeyword, setThrottledKeyword] = useState(keyword);
useEffect(() => {
const timeout = setTimeout(() => {
setThrottledKeyword(keyword);
}, delay);
return () => {
clearTimeout(timeout);
};
}, [keyword]);
return throttledKeyword;
}; Please feel free to reopen the issue, or ask additional questions if they arise. |
First, thank you very much for this very clean and well thought out library, it is very nice to work with.
One thing: When passing a render function to
renderSuggestions
, fx:the
renderSuggestions
method is called twice every time thevalue
prop passed<MentionInput>
changes, with thekeyword
argument passed torenderSuggestions
beingundefined
in the first call followed by the correct value in the next call.So when we use the logic
if (keyword == null)
to check if the suggestions element should be rendered or not, it first thinks it should not render, and then it renders right after, causing an unwanted quick visible flicker:This only happens when the
value
prop is changed by the user typing an extra character, if the user deletes a characterrenderSuggestions
is still called twice, but thekeyword
argument is correct in both calls.Is there something we can do to avoid this behaviour? It happens in our code and also if you run the example code provided with this library.
The text was updated successfully, but these errors were encountered: