Trim value for text input when the input is blurred

[hanbyul-here]

Close #143

I followed the suggestion from the ticket, but I wonder if it will be better to trim the value so leading/trailing slashes never reach to the form at all? 🤔

[yuvipanda]

but I wonder if it will be better to trim the value so leading/trailing slashes never reach to the form at all? 🤔

I think that's the way to go!

[batpad]

@hanbyul-here thanks for the PR! 🎉

I wonder if it will be better to trim the value so leading/trailing slashes never reach to the form at all?

I agree as well :) - I think leading / trailing spaces can be transparently removed so they never reach the form. Or transparently removed just before attempting the form submission? Whichever way is easier, but yes, ideally they should be removed before it reaches the validation step.

@hanbyul-here lemme know if it helps to quickly talk through.

[hanbyul-here]

I pushed the change so the value gets trimmed when the input is blurred (when focus moves from the text input to somewhere else) !

[batpad]

@hanbyul-here this looks good to me. Am just slightly worried about some edge-cases where the Blur event does not trigger, but the user is still able to submit the form?

Does it make sense to think about the doing the trim on form submission, so it's guaranteed to happen before validation triggers? But I can see there's two places - one when the user kicks off the image [1] build and one where the user submits the final form [2] , and it might get a bit weird to handle this in both places and then onBlur might be best.

Am always just a bit worried that these input field events can be flaky in some edge cases, but also if it feels like blur reliably fires, then this is probably the best approach.

[hanbyul-here]

Yah! that is a valid concern I also looked up before making this PR!

• onBlur should be triggered before onSubmit unless there is async process going on for onBlur
• But I agree that it will be much better to handle the data trimming on the data right before the submission. I honestly couldn't figure out how to access form data when <form> is generated with Jupyter (I would normally handle it with onSubmit event with form element.)
• Thanks for the pointers! I totally missed the ImageBuilder part! I looked at handleSubmit but it looked like I could read the form data but couldn't manipulate the form data through the event. Am I missing anything?
• The other approach I tried is to trim the value with onChange - but I thought it is generally a better ux to trim it once user is done with the input.

[mfisher87]

I made the mistake of pasting an image string with a trailing space again today. I'm so excited y'all are saving me from myself 😁

[batpad]

@hanbyul-here makes sense.

I approved the PR and think it's fine to merge, but how do you feel about adding a test?

I think it would be something in https://github.com/2i2c-org/jupyterhub-fancy-profiles/blob/main/src/ImageBuilder.test.tsx and / or https://github.com/2i2c-org/jupyterhub-fancy-profiles/blob/main/src/ProfileForm.test.tsx

Might just also be a good way to familiarize with the testing workflow.

[hanbyul-here]

Thanks for your suggestion to put tests! I made a bit more changes than I initially made, also I realized that I don't know good values to test complete flows 💦 so I will appreciate if you can take one more look @batpad !

[mfisher87]

Yay, thank you @hanbyul-here 🎉