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): options in the select component will be overwritten due to timing of React.setState #17951

Merged
merged 1 commit into from
Jan 7, 2022

Conversation

stephenLYZ
Copy link
Member

SUMMARY

This PR fix the problem that when user undo delete of a native filter, the options under column is gone. The root cause is due to the setState mechanism of the react hook. In the Select component, there is one case that we update the component selectOptions which based on the incoming props:

useEffect(() => {
    fetchedQueries.current.clear();
    setSelectOptions(
      options && Array.isArray(options) ? options : EMPTY_OPTIONS,
    );
    setAllValuesLoaded(false);
}, [options]);

and a logic we use useEffect to update selectOptions:

 useEffect(() => {
    if (selectValue) {
      // ...
      if (options.length > 0) {
        setSelectOptions([...options, ...selectOptions]);
      }
    }
}, [labelInValue, isAsync, selectOptions, selectValue]);

So there is a problem that useEffect knows the state has changed, but the value taken at this time is still the old value.

The solution is we can pass an updater function to transform it so we can use the pending state. see https://beta.reactjs.org/reference/usestate#passing-an-updater-function-to-setstate.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

before

Screen.Recording.2021-09-28.at.10.23.30.PM.mov

after

2022-01-07.1.21.55.mov

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

@codecov
Copy link

codecov bot commented Jan 6, 2022

Codecov Report

Merging #17951 (3b1aa1f) into master (f75908b) will increase coverage by 0.00%.
The diff coverage is 100.00%.

Impacted file tree graph

@@           Coverage Diff           @@
##           master   #17951   +/-   ##
=======================================
  Coverage   67.07%   67.07%           
=======================================
  Files        1609     1609           
  Lines       64905    64907    +2     
  Branches     6868     6868           
=======================================
+ Hits        43537    43539    +2     
  Misses      19502    19502           
  Partials     1866     1866           
Flag Coverage Δ
javascript 53.77% <100.00%> (+<0.01%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files Coverage Δ
superset-frontend/src/components/Select/Select.tsx 86.42% <100.00%> (+0.09%) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f75908b...3b1aa1f. Read the comment docs.

Copy link
Member

@michael-s-molina michael-s-molina left a comment

Choose a reason for hiding this comment

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

Nice catch! Thanks for the fix.

@rusackas
Copy link
Member

rusackas commented Jan 7, 2022

Thank you for the excellent PR description! This helps a LOT. :D

@rusackas rusackas merged commit 2ae29c9 into apache:master Jan 7, 2022
shcoderAlex pushed a commit to casual-precision/superset that referenced this pull request Feb 7, 2022
bwang221 pushed a commit to casual-precision/superset that referenced this pull request Feb 10, 2022
@mistercrunch mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 1.5.0 labels Mar 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels size/M 🚢 1.5.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants