[Interactive Graph Editor] Stop page scrolling on number text field focused scroll

[nishasy]

Summary:

Consider an <input> element with type="number". The default behavior in React (except Firefox)
if it's focused and wheel over it is that it does BOTH (a) change the number and (b) scroll
the entire page.

There is a specific request from content authors to make it so that only one of those
bevahiors happens.

In this PR:

• Make a new component called ScrolllessNumberTextField that uses stopPropagation
  to stop the page scroll. The number changes on scroll (except in Firefox).
• Stories to test this
• Updates to all the type="number" text fields in the perseus editor to use
  the new ScrolllessNumberTextField component.

Notes:

• Even with this custom implementation, Firefox inputs scroll the page and not the number.
  This is in line with native (non-React) HTML input behavior. As this still only executes
  one of the actions, this is still fine.
• It doesn't seem to be possible to test the input change on wheel event.

Issue: https://khanacademy.atlassian.net/browse/LEMS-2121

Test plan:

yarn jest packages/perseus-editor/src/components/__tests__/scrollless-number-text-field.test.tsx

Storybook

• https://khan.github.io/perseus/?path=/docs/perseuseditor-widgets-interactive-graph--docs
• Check all the inputs for all the start coords settings and the locked figures settings

Videos:

Before

Screen.Recording.2024-08-02.at.3.01.02.PM.mov

After

Screen.Recording.2024-08-02.at.3.01.46.PM.mov

[github-actions]

Size Change: +8 B (0%)

Total Size: 853 kB

Filename	Size	Change
packages/perseus-editor/dist/es/index.js	273 kB	+547 B (+0.2%)
packages/perseus/dist/es/index.js	412 kB	-539 B (-0.13%)

ℹ️ View Unchanged

Filename	Size
packages/kas/dist/es/index.js	38.3 kB
packages/kmath/dist/es/index.js	4.27 kB
packages/math-input/dist/es/index.js	80.8 kB
packages/math-input/dist/es/strings.js	1.73 kB
packages/perseus-core/dist/es/index.js	1.48 kB
packages/perseus-linter/dist/es/index.js	21.6 kB
packages/perseus/dist/es/strings.js	3.23 kB
packages/pure-markdown/dist/es/index.js	3.67 kB
packages/simple-markdown/dist/es/index.js	12.4 kB

_{compressed-size-action}

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/perseus for changes to .changeset/purple-dots-beam.md, packages/perseus-editor/src/components/angle-input.tsx, packages/perseus-editor/src/components/coordinate-pair-input.tsx, packages/perseus-editor/src/components/scrollless-number-text-field.tsx, packages/perseus-editor/src/components/start-coords-circle.tsx, packages/perseus-editor/src/components/__stories__/scrollless-number-text-field.stories.tsx, packages/perseus-editor/src/components/__tests__/scrollless-number-text-field.test.tsx, packages/perseus-editor/src/components/graph-locked-figures/locked-polygon-settings.tsx

---

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

[codecov]

Codecov Report

Attention: Patch coverage is 98.14815% with 1 line in your changes missing coverage. Please review.

Project coverage is 70.35%. Comparing base (b4e0b60) to head (a1d54f4).
Report is 3 commits behind head on main.

Files	Patch %	Lines
...or/src/components/scrollless-number-text-field.tsx	97.77%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1481      +/-   ##
==========================================
+ Coverage   69.94%   70.35%   +0.41%     
==========================================
  Files         509      512       +3     
  Lines      105489   105537      +48     
  Branches     7591    11437    +3846     
==========================================
+ Hits        73780    74255     +475     
+ Misses      31520    31282     -238     
+ Partials      189        0     -189     

Files	Coverage Δ
...ages/perseus-editor/src/components/angle-input.tsx	100.00% <100.00%> (ø)
...us-editor/src/components/coordinate-pair-input.tsx	100.00% <100.00%> (ø)
...s/graph-locked-figures/locked-polygon-settings.tsx	100.00% <100.00%> (ø)
...seus-editor/src/components/start-coords-circle.tsx	93.42% <100.00%> (-0.09%)	⬇️
...or/src/components/scrollless-number-text-field.tsx	97.77% <97.77%> (ø)

... and 168 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

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

[benchristel]

LGTM. I feel like this is really a bug in React, but since we probably won't get it fixed there, we might consider it a bug in Wonder Blocks. I don't think we'd ever want a scroll gesture to both change the input and scroll the page.

[benchristel]

The reason this happens is explained here: https://stackoverflow.com/a/68266494

Might be worth linking to that answer so future maintainers know what's up.

[nishasy]

@benchristel I did explore updating this in Wonder Blocks, but I don't think it's feasible to change this everywhere across Khan Academy. (a) Because this behavior is the exact opposite of expected native behavior, and (b) because it's inconsistent across browsers. I think this is fine for the content authors as it was specifically requested, but it seems like it would warrant a much larger discussion if we wanted to address this elsewhere. 😞

[github-actions]

npm Snapshot: Published

Good news!! We've packaged up the latest commit from this PR (a1d54f4) and published it to npm. You
can install it using the tag PR1481.

Example:

yarn add @khanacademy/perseus@PR1481

If you are working in Khan Academy's webapp, you can run:

./dev/tools/bump_perseus_version.sh -t PR1481