Extend Component class instead of using x-interaction #238
Conversation
dan-searle
force-pushed
the
x-topic-search-as-class
branch
from
2e92c17 to
83373a1
Compare
…term (defends against slow API response causing results to be shown when input is now empty).
|
This branch now includes cherry-pick of #241 |
| if (targetIdIndex > -1) { | ||
| followedTopicIds.splice(targetIdIndex, 1); | ||
| handleInputClickOrFocus() { | ||
| if (this.state.searchTerm.length >= this.minSearchLength) { |
There was a problem hiding this comment.
@dan-searle This line will prevent the bug which it displays results even if there is no searchTerm?
There was a problem hiding this comment.
Unfortunately not. This only happens when you click into the input. The bug happens when the input already has focus, a request has been made for suggestions, and the response arrives after the results container has been closed (because the input length < 2)
There was a problem hiding this comment.
I see. I know we are going to fix the bug after merging this PR, aren't we. Thank you!
There was a problem hiding this comment.
Yeah, the fix is the resultsForTerm that's in various places.
There was a problem hiding this comment.
Actually, I had to revert that way of fixing it, as it didn't work very well. There's a different way of fixing it now.
…he minSearchLength.
…ions with their follow buttons in the appropriate states.
dan-searle
force-pushed
the
x-topic-search-as-class
branch
from
881a6c4 to
80c2b45
Compare
x-interactionunfortunately doesn't support ourx-topic-searchuse case on the app, as it'll be re-rendered with any change in the followed topics array (on the MyFT -> Manage Topics page) and this causes us to run into #224.Using a Preact Component class allows the consumer to manage and pass-in the
followedTopicIdsas a prop.x-topic-searchholds in itsstatethe topics just searched, and can then render the correct result depending on thefollowedTopicIdsprop - e.g. present the search results, or show a "you already follow {topic}` message.This also allows us to nicely encapsulate the body event listeners required to close the topic search results when you click elsewhere on the page (#239).