Modernization and Migration of InputWithExamples to NumericInput folder #2121
Conversation
SonicScrewdriver
changed the title
npm Snapshot: PublishedGood news!! We've packaged up the latest commit from this PR (64d86ca) and published it to npm. You Example: yarn add @khanacademy/perseus@PR2121If you are working in Khan Academy's webapp, you can run: ./dev/tools/bump_perseus_version.sh -t PR2121 |
|
Size Change: +251 B (+0.02%) Total Size: 1.47 MB
ℹ️ View Unchanged
|
| const [state, setState] = React.useState<State>({ | ||
| focused: false, | ||
| showExamples: false, | ||
| }); |
There was a problem hiding this comment.
These two variables are always set together, so I've opted to keep this pairing after the shift to the functional component. I wasn't sure of a good name to explain both of them so I went "generic", but I could easily see an argument to rename this to something like "setFocusStates".
There was a problem hiding this comment.
...Wait. If these are always set the exact same thing in multiple places ... why do we even need both? I bet we could just use "focused".
There was a problem hiding this comment.
I've updated this to just use a single inputFocused state.
There was a problem hiding this comment.
I opted to keep this a separate file as it seemed like too long a component to append to the numeric-input file.
| focus: () => { | ||
| if (inputRef.current) { | ||
| inputRef.current.focus(); | ||
| inputRef.current?.focus(); |
There was a problem hiding this comment.
Is the optional (?) needed when we have the code within a conditional that checks for its existence? I thought that Typescript was able to understand that.
There was a problem hiding this comment.
Oooo I actually meant to replace the if conditional! Thank you for catching this
Summary:
This PR is part of the Numeric Input Project work. It is being landed onto the
feature/numeric-dx-refactorbranch.This PR contains the following changes:
Video Example of Snapshot Testing:
Screen.Recording.2025-01-16.at.2.45.52.PM.mov
Issue: LEMS-2785
Test plan: