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(select): remove code causing excessive calls to the onValueChange prop #2063

Merged
merged 1 commit into from
Apr 22, 2024

Conversation

acd02
Copy link
Contributor

@acd02 acd02 commented Apr 19, 2024

TASK: #2062

Description, Motivation and Context

While using the Select component in controlled mode, two issues have been observed:

  1. The onValueChange prop is executed on initial render, even though the value has not been changed.
  2. Each time the value changes, the onValueChange prop is executed twice.

Repro ➡ https://stackblitz.com/edit/stackblitz-starters-ulfsq2?file=pagesContent%2Findex.tsx

The problem seems to originate from packages/components/select/src/SelectContext.tsx, specifically this piece of code:

useEffect(() => {
  if (valueProp) setValue(valueProp)
}, [valueProp, setValue])

The weird thing is, when we comment out what's inside the useEffect, all the tests still pass. And even when we interact with the component in the browser (in both controlled and uncontrolled modes), it doesn't seem to break anything

Types of changes

  • 🛠️ Tool
  • 🪲 Bug fix (non-breaking change which fixes an issue)
  • ✨ New feature (non-breaking change which adds functionality)
  • 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • 🧾 Documentation
  • 📷 Demo
  • 🧪 Test
  • 🧠 Refactor
  • 💄 Styles

@acd02 acd02 added Type: Bug A bug to fix Component Related to a component Component: select Related to alert-dialog component labels Apr 19, 2024
@acd02 acd02 self-assigned this Apr 19, 2024
@acd02 acd02 linked an issue Apr 19, 2024 that may be closed by this pull request
@acd02 acd02 requested review from Powerplex and andresin87 April 19, 2024 15:59
Copy link

codecov bot commented Apr 19, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 97.69%. Comparing base (8c60fc3) to head (0125440).
Report is 8 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #2063      +/-   ##
==========================================
- Coverage   97.69%   97.69%   -0.01%     
==========================================
  Files         748      748              
  Lines        5851     5849       -2     
  Branches     2060     2059       -1     
==========================================
- Hits         5716     5714       -2     
  Misses        133      133              
  Partials        2        2              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

… prop

remove code causing excessive calls to the onValueChange prop

#2062
@acd02 acd02 force-pushed the 2062-component-select-onvaluechange-bug branch from a18f50b to 0125440 Compare April 22, 2024 09:31
@acd02 acd02 merged commit d5c4316 into main Apr 22, 2024
9 of 10 checks passed
@acd02 acd02 deleted the 2062-component-select-onvaluechange-bug branch April 22, 2024 13:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: select Related to alert-dialog component Component Related to a component Type: Bug A bug to fix
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Component] - Select onValueChange bug
1 participant