Bug: Can keep typing in the bio field of user settings after 255 characters

[nickytonline]

We currently display a message saying the bio is too long in the user settings, but we're not leveraging the native maxLength HTML attribute to prevent someone from typing past the limit.

As well, since maxLength prevents you from typing or pasting text past 255 characters, the bio too long message will actually never appear so it can be removed from the component.

This is what happens when maxLength="255" is set.

[github-actions[bot]]

Thanks for the issue, our team will look into it as soon as possible! If you would like to work on this issue, please wait for us to decide if it's ready. The issue will be ready to work on once we remove the "needs triage" label.

To claim an issue that does not have the "needs triage" label, please leave a comment that says ".take". If you have any questions, please reach out to us on Discord or follow up on the issue itself.

For full info on how to contribute, please check out our contributors guide.

[nickytonline]

The file to change is https://github.com/open-sauced/app/blob/3d157ab69ae34353ec169f6c6cbd12744c199a98/components/organisms/UserSettingsPage/user-settings-page.tsx#L273-L298

Here's what needs to be done to fix this

            {/* Bio section */}
            <div className="flex flex-col gap-2">
              <label className="flex flex-col w-full text-sm">
                Bio
                <div className="flex-1 px-2 shadow-input border transition rounded-lg py-1 flex items-center bg-light-slate-4 disabled:cursor-not-allowed focus-within:border-light-orange-9">
                  <textarea
                    rows={4}
                    placeholder="Tell us about yourself."
                    name="bio"
                    className="w-full focus:outline-none placeholder:font-normal placeholder-slate-400 bg-inherit"
                    value={bio}
+					maxLength={255}
                    onChange={(e) => setBio(e.target.value)}
                  ></textarea>
                </div>
              </label>

-              {bio?.length > 255 ? (
-                <p aria-live="assertive" className="text-light-red-10 text-xs">
-                  Bio too long
-                </p>
-              ) : (
-                <p aria-live="polite" className="text-xs">
-                  {bio?.length}/255
-                </p>
-              )}
+              <p aria-live="polite" className="text-xs">
+                {bio?.length}/255
+              </p>
            </div>

[lexlucid]

.take

[Pagla-Dasu]

.take

[github-actions[bot]]

Thanks for being interested in this issue. It looks like this ticket is already assigned to a contributor.

[unix-unicorn]

.take

[devharsh2k4]

is it still open?

[nickytonline]

@Pagla-Dasu has been working on this and has a PR up for it. Not sure why they weren't assigned. 🤔

[devharsh2k4]

@nickytonline i have raised a pr if possible could u review

[nickytonline]

@nickytonline i have raised a pr if possible could u review

@devharsh2k4, it's already assigned to @Pagla-Dasu and they have a PR up for this.

[open-sauced[bot]]

:tada: This issue has been resolved in version 2.48.1-beta.1 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket:

[open-sauced[bot]]

:tada: This issue has been resolved in version 2.49.0 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket: