This should fix bug in Tabs (react-toolbox@1.3.4 ) with incorrect pointer update #1567
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.
Hi!
I use master branch (react-toolbox@1.3.4). The bug affects that version.
Bug description.
When the

Tabs
component contains someTab
components that vary depending on an app state, pointer element (under active tab) could be rendered with incorrect width.This doesn't affect initial render, only render after state changes that affect
Tab
components.E.g. if an active tab receives a new
label
prop that has longer or shorter text than currentlabel
thenTabs.updatePointer
inTabs.componentWillReceiveProps
will calculate width atnextProps.index
(which is correct), but based on old tab element (which is incorrect).the first state example:
the second state example:
Notice how the blue pointer on the second example repeats the width of the pointer from the first example (previous tabs state).
Suggested solution.
Tabs
component removecomponentWillReceiveProps
method.Tabs
component add componentDidUpdate method as shown in the pull request.dev branch (2.x)
As I noticed,
componentDidUpdate
has been added like in my suggestion. That's nice but I thinkcomponentWillReceiveProps
should be removed there. Though I cannot now test and prove for this version, it most probably triggers unnecessary render for the old tabs and pointer that will be rerendered by state change incomponentDidUpdate
anyway.