School Info Interstitial: country dropdown bug

[nkiruka]

Bug: country dropdown is clipped by School Info Interstitial modal edge

Fix: set max-height for select element dropdown to 160px

Screen shots

Before:

After:

Gif

[codecov-io]

Codecov Report

❗ No coverage uploaded for pull request base (staging@4c4e114). Click here to learn what that means.
The diff coverage is 100%.

@@            Coverage Diff             @@
##             staging   #30050   +/-   ##
==========================================
  Coverage           ?   72.03%           
==========================================
  Files              ?     1368           
  Lines              ?    84453           
  Branches           ?     3397           
==========================================
  Hits               ?    60835           
  Misses             ?    20385           
  Partials           ?     3233

Flag	Coverage Δ
#integration	55.37% <ø> (?)
#storybook	56.61% <100%> (?)
#unit	58.15% <100%> (?)

Impacted Files	Coverage Δ
apps/src/templates/CountryAutocompleteDropdown.jsx	87.5% <100%> (ø)

---

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 4c4e114...a29a889. Read the comment docs.

[joshlory]

Copying over my comment from the previous PR:

Ideally we'd let the dropdown expand to fill the screen. Can we clear overflow: auto; on the modal div, or does that cause other problems?

[nkiruka]

I set the over-flow to "initial" but it didn't fix the country dropdown bug. This might be due to the overflow property not being a react virtualized select prop (there seems to be a custom option). See react virtualized select

Since maxHeight is react virtualized select prop, setting the dropdown height to be 80% of the total height of the modal is a solution to this bug. Thoughts.

[Erin007]

How does this change affect other uses of the CountryAutocompleteDropdown? The way you have it now, I think you could pass undefined as a maxHeight to <VirtualizedSelect/>. Please double check that this doesn't cause issues.

Other uses of CountryAutocompleteDropdown: old sign up form (Do we even still need this code?) and census form.

[nkiruka]

@Erin007 Thanks for the questions. The change does not affect other uses of CountryAutocompleteDropdown

[nkiruka]

@Erin007 The old_sign_up_form is still in use. From my discussion with Brad & Maddie, the naming of the file is a result of a split test that was conducted previously that was inconclusive. We are still using the “new” flow for Oauth signups, and the “old” flow for email sign-ups. I have an action item to rename the "old_sign_up_form" so it is not confusing.