enhancement: add max-length, disabled to text and text_area #100
Conversation
mscolnick
commented
Sep 12, 2023
•
mscolnick
commented
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
marimo/_plugins/ui/_impl/input.py
Outdated
| @@ -326,6 +326,9 @@ class text(UIElement[str, str]): | |||
| - `placeholder`: placeholder text to display when the text area is empty | |||
| - `kind`: input kind, one of `"text"`, `"password"`, `"email"`, or `"url"` | |||
| defaults to `"text"` | |||
| - `max_length`: maximum length of input | |||
| - `min_length`: minimum length of input | |||
There was a problem hiding this comment.
When I test, min_length has no (visible) effect on the frontend, and no effect on Python either. Values less than the min length are still sent to Python, with or without forms. Testing on Chrome.
If someone makes a text input with min length, say 8, but types in only 3 characters, what will text.value be? I guess it might be the empty string, but that's kind of awkward because "" has length 0, ha ...
Maybe min_length doesn't make as much sense as max_length, and can just be validated in Python by the developer? In addition to UX, max_length is helpful for the developer to prevent users from OOM-ing the kernel by typing in an absurdly long string. Developers will have to handle min_length validation in Python, but at least strings that are too short won't have any performance issues.
Given these considerations, my vote is to just not have a min_length option.
| @@ -57,15 +63,26 @@ const TextComponent = (props: TextComponentProps) => { | |||
| url: <GlobeIcon size={16} />, | |||
| }; | |||
|
|
|||
| const endAdornment = props.maxLength ? ( | |||
| <span className="text-muted-foreground text-xs font-medium"> | |||
There was a problem hiding this comment.
Maybe change to a more visible color (like an amber or red) when the max length is hit?
There was a problem hiding this comment.
i feel that is usually if you go over, instead of exactly, and this will just stop at the max_length
There was a problem hiding this comment.
maybe amber isn't as "woah something is wrong"
There was a problem hiding this comment.
OK, fine to keep as is for now. The only reason I suggested it is in case a user doesn't see the character count get confused why they can't continue typing
mscolnick
changed the title
| @@ -57,15 +63,26 @@ const TextComponent = (props: TextComponentProps) => { | |||
| url: <GlobeIcon size={16} />, | |||
| }; | |||
|
|
|||
| const endAdornment = props.maxLength ? ( | |||
| <span className="text-muted-foreground text-xs font-medium"> | |||
There was a problem hiding this comment.
OK, fine to keep as is for now. The only reason I suggested it is in case a user doesn't see the character count get confused why they can't continue typing
