Skip to content

[Feature] Add auto-resizing textarea widget with character counter#1083

Merged
mmzeynalli merged 6 commits into
smithyhq:mainfrom
maxim-f1:textarea-autoresize
Jul 13, 2026
Merged

[Feature] Add auto-resizing textarea widget with character counter#1083
mmzeynalli merged 6 commits into
smithyhq:mainfrom
maxim-f1:textarea-autoresize

Conversation

@maxim-f1

Copy link
Copy Markdown
Contributor

Description

This PR introduces a new auto-resizing textarea widget with a dynamic character counter and maximum character validation.

Key Features

  • Dynamic Auto-Resizing: The textarea automatically adjusts its height dynamically when new lines are added or removed during input events.
  • Character Counter: Displays the current character count alongside the maxLength limit (e.g., 140 / 400).
  • Visual Validation & Input Blocking:
    • The counter highlights in redimmediately when the user reaches the maximum allowed character threshold.
    • Further text entry is blocked once the limit is hit to prevent invalid data submission.
  • Compatible with SQLAlchemy's Text, BinaryLarge, and Binary types

@mmzeynalli

Copy link
Copy Markdown
Member

This is a nice feature!

However, can we:

  1. Update with main?
  2. Have auto-resize as a parameter? Maybe I have really long text. I would like a char count, but with auto-resize, it would take the whole page?
  3. Can we also add a word count? I think all of them should be passed as params, with char count being true by default.

# Conflicts:
#	sqladmin/statics/css/main.css
#	sqladmin/widgets.py
@maxim-f1

Copy link
Copy Markdown
Contributor Author

2. Have auto-resize as a parameter? Maybe I have really long text. I would like a char count, but with auto-resize, it would take the whole page?

You can still shrink the input so it doesn't take up too much space. But if you start typing, it will expand again to fit everything.

image

@maxim-f1

maxim-f1 commented Jul 10, 2026

Copy link
Copy Markdown
Contributor Author

2. Have auto-resize as a parameter?

Yes, it will need some improvement.

@maxim-f1

Copy link
Copy Markdown
Contributor Author

3. Can we also add a word count? I think all of them should be passed as params, with char count being true by default.

Theoretically, it could be added, but I'm not sure for what use cases. Databases usually have a character limit out of the box. The number of words is a fairly narrow case, so I'm not sure it'll be useful.

@maxim-f1

Copy link
Copy Markdown
Contributor Author

This can be done via form_args

  form_args = {
      'text_without_limit': {
          'show_chars_count': False
      }
  }
image

@mmzeynalli

Copy link
Copy Markdown
Member

Okay, lets skip word count, you are right.

But I still insists auto_resize should be also a param like show_chars_count. Make default true, but, still user should be able to cusomize it.

… parameters are independent of each other

@mmzeynalli mmzeynalli left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, is there a chance to have it "default" field for Text type?

Mapped[str] = mapped_column(String) -> StringField
Mapped[str] = mapped_column(Text) -> TextField

Comment thread sqladmin/widgets.py
Comment thread sqladmin/widgets.py Outdated
class_ = " ".join(filter(None, (class_, "autoresize-textarea")))
kwargs.setdefault("rows", "1")

kwargs["class"] = class_

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This happens even when class_ is None. Skip instead.

Comment thread sqladmin/widgets.py Outdated
)


class TextAreaWidget(widgets.Input):

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why not widgets.TextArea?

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think in this case you can downsize call override

Comment thread sqladmin/statics/js/main.js Outdated
});


// Shows the number of characters in a textarea..

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

typo

@mmzeynalli

Copy link
Copy Markdown
Member

@maxim-f1 Hey, I plan to release new version tomorrow or day after, could you finalize this as well?

@maxim-f1

Copy link
Copy Markdown
Contributor Author

Also, is there a chance to have it "default" field for Text type?

In this case, all text fields will become textareas instead of input fields. It seems this behavior is not expected for short strings of the String CHAR type.

@mmzeynalli

Copy link
Copy Markdown
Member

Yes, I suspected that, and was wondering if we can "separate" input from textarea

@maxim-f1

Copy link
Copy Markdown
Contributor Author

In my opinion, it is better to make a separate widget for String and CHAR in another MR

# Conflicts:
#	sqladmin/fields.py
#	sqladmin/statics/css/main.css
#	sqladmin/widgets.py
#	tests/test_fields.py
@mmzeynalli mmzeynalli added the ready-to-merge Approved and ready to merge. Will be published with the next release. label Jul 13, 2026
@mmzeynalli mmzeynalli merged commit 9944f6f into smithyhq:main Jul 13, 2026
10 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

ready-to-merge Approved and ready to merge. Will be published with the next release.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants