Skip to content
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

fix(EuiSelectableList): fix read-after-write on component state #7768

Merged

Conversation

tkajtoch
Copy link
Member

@tkajtoch tkajtoch commented May 16, 2024

Summary

This PR fixes a recently introduced bug (in #7728) in the EuiSelectableList component caused by read-after-write on its state before the state update is applied. More specifically, forceVirtualizedListRowRerender reads this.state.optionArray, and when called from componentDidUpdate, the setState a few lines above isn't yet applied.

QA

EUI

  1. Checkout this PR - gh pr checkout 7768
  2. Run yarn && yarn --cwd packages/eui build-pack

Kibana

  1. Checkout Kibana upgrade PR - gh pr checkout 183431
  2. Point @elastic/eui version to the local build of EUI in package.json
  3. Run yarn kbn bootstrap --no-validate
  4. Confirm node scripts/jest --config x-pack/plugins/global_search_bar/jest.config.js --watch telmetry.test.tsx passes all tests

General checklist

  • Release checklist
    - [ ] A changelog entry exists and is marked appropriately. Skipping a changelog as this is a fix for a change only made for docs/storybook

@tkajtoch tkajtoch self-assigned this May 16, 2024
@tkajtoch tkajtoch requested a review from a team as a code owner May 16, 2024 23:25
@@ -349,7 +348,9 @@ export class EuiSelectableList<T> extends Component<
prevProps.onFocusBadge !== onFocusBadge ||
prevProps.searchable !== searchable
) {
this.forceVirtualizedListRowRerender();
this.setState({
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't want to add an optional optionArray argument to forceVirtualizedListRowRerender, and it felt like using setState directly was the cleanest solution. Let me know if you have other ideas!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for catching this! 🙏

Imho, I'd think reusing forceVirtualizedListRowRerender with passing the optionArray might be better for a) comprehension (naming stating what's happening) and b) reusing available code.

But I'm not hard set on this, I'm fine with either.


// ensure that ListRow updates based on item props
if (isVirtualized) {
} else if (isVirtualized) {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

else if because it's not needed to execute both setStates when the first condition is true

@@ -349,7 +348,9 @@ export class EuiSelectableList<T> extends Component<
prevProps.onFocusBadge !== onFocusBadge ||
prevProps.searchable !== searchable
) {
this.forceVirtualizedListRowRerender();
this.setState({
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for catching this! 🙏

Imho, I'd think reusing forceVirtualizedListRowRerender with passing the optionArray might be better for a) comprehension (naming stating what's happening) and b) reusing available code.

But I'm not hard set on this, I'm fine with either.

@cee-chen cee-chen added skip-changelog tech debt testing Issues or PRs that only affect tests - will not need changelog entries labels May 21, 2024
@cee-chen cee-chen enabled auto-merge (squash) May 21, 2024 16:15
@kibanamachine
Copy link

Preview staging links for this PR:

@cee-chen cee-chen merged commit 5c50409 into elastic:main May 21, 2024
5 checks passed
@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

History

cc @tkajtoch

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
skip-changelog tech debt testing Issues or PRs that only affect tests - will not need changelog entries
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants