This repository has been archived by the owner on Mar 13, 2024. It is now read-only.
PLT-8208 Use ref callback to set focus on channel switcher #342
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
enahum
suggested changes
Nov 21, 2017
| @@ -311,7 +309,10 @@ export default class QuickSwitchModal extends React.PureComponent { | |||
| {help} | |||
| </div> | |||
| <SuggestionBox | |||
| ref='switchbox' | |||
| ref={(input) => { | |||
There was a problem hiding this comment.
I'm fine with this but perhaps you want to create a function like
suggestionBoxRef = (ref) => {
this.switchBox = ref;
this.focusTextbox();
}and then here just do ref={this.suggestionBoxRef} just to avoid creating a new function each time this component renders
There was a problem hiding this comment.
a nice article for why we should avoid arrow functions and binds like this one https://medium.freecodecamp.org/why-arrow-functions-and-bind-in-reacts-render-are-problematic-f1c08b060e36
There was a problem hiding this comment.
Sure, but all the React docs show creating a new function :P
mkraft
approved these changes
Nov 21, 2017
|
@enahum change made |
enahum
approved these changes
Nov 21, 2017
hmhealey
pushed a commit
that referenced
this pull request
Aug 28, 2020
* Add timeout flags for mobile * Wait 10 seconds before failing
hmhealey
pushed a commit
that referenced
this pull request
Mar 17, 2021
* Add timeout flags for mobile * Wait 10 seconds before failing
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
It looks like this was caused by the upgrade to React 16. For some reason the component
refsisn't getting set in time forcomponentDidUpdate(), when in the past it would.There are some mentions in the changelog about changes to lifecycle and refs https://github.com/facebook/react/releases/tag/v16.0.0 but nothing that I can see that should directly affect this behavior and all the docs I can find seem to state that refs should be available in time for
componentDidUpate().Fixed by making use of the ref callback.
Ticket Link
https://mattermost.atlassian.net/browse/PLT-8208