Auto-expanding textarea for frontpage text in event settings #1340

jevinjojo · 2025-11-24T08:54:17Z

Issue

Fixes Feature (forms): Auto-Expanding Textarea for Frontpage Text in Event Settings #1336

auto-expand.mp4

Description

Add I18nAutoExpandingTextarea widget with height adjustment
Self contained inline javascript for component
Apply widget to frontpage_text field in event settings

Summary by Sourcery

Introduce an auto-expanding internationalized textarea widget and apply it to the event frontpage text setting.

New Features:

Add an I18nAutoExpandingTextarea widget that automatically adjusts its height based on content for i18n text fields.

Enhancements:

Use the auto-expanding textarea widget for the event frontpage text setting to improve editing long descriptions.
Ensure templates load the static files tag needed for the new widget behavior.

sourcery-ai · 2025-11-24T08:54:24Z

Reviewer's Guide

Introduces an auto-expanding internationalized textarea widget and applies it to the event frontpage text setting, including inline JavaScript to dynamically adjust the textarea height for static and dynamically added i18n fields.

Sequence diagram for auto-expanding frontpage text textarea

sequenceDiagram
  actor "Organizer" as Organizer
  participant "Browser" as Browser
  participant "DjangoView" as DjangoView
  participant "I18nAutoExpandingTextarea" as Widget
  participant "JS_AutoExpand" as JS

  "Organizer" ->> "Browser": "Open event settings page"
  "Browser" ->> "DjangoView": "GET /event/settings"
  "DjangoView" ->> "Widget": "Render field 'frontpage_text' with widget 'I18nAutoExpandingTextarea'"
  "Widget" -->> "DjangoView": "HTML <textarea data-auto-expand='true'> + inline <script>"
  "DjangoView" -->> "Browser": "Settings page HTML with auto-expanding textarea"

  "Browser" ->> "JS": "Trigger 'DOMContentLoaded' event"
  "JS" ->> "Browser": "Select 'textarea[data-auto-expand="true"]' and initialize autoExpandTextarea"
  "JS" ->> "Browser": "Attach 'input' and 'paste' listeners to textarea"

  "Organizer" ->> "Browser": "Type or paste content into frontpage text textarea"
  "Browser" ->> "JS": "Fire 'input' or 'paste' event"
  "JS" ->> "Browser": "adjustHeight(): set height between 80px and 300px, toggle vertical overflow"

  "Browser" ->> "JS": "MutationObserver detects dynamically added i18n textareas (language tabs)"
  "JS" ->> "Browser": "Initialize autoExpandTextarea on new i18n textareas with data-auto-expand='true'"

Class diagram for the new I18nAutoExpandingTextarea widget

classDiagram
  class I18nTextarea {
  }

  class I18nAutoExpandingTextarea {
    + __init__(attrs=None, **kwargs)
    + render(name, value, attrs=None, renderer=None)
    - auto-expanding behavior configured via HTML attributes and inline JavaScript
  }

  I18nTextarea <|-- I18nAutoExpandingTextarea

File-Level Changes

Change	Details	Files
Add an auto-expanding i18n textarea widget that adjusts height based on content.	Create I18nAutoExpandingTextarea subclass extending the existing I18nTextarea widget Initialize widget with default CSS classes, data-auto-expand attribute, and inline min/max height and transition styles Enhance attrs merging so caller-provided classes are appended to default classes	`app/eventyay/base/forms/__init__.py`
Implement inline JavaScript behavior to auto-resize textareas and support dynamically added i18n tabs.	Override render to append a self-contained <script> block next to the rendered textarea HTML Within the script, define autoExpandTextarea that sets height between 80px and 300px and toggles overflow based on scroll height Attach input and paste listeners to trigger resizing, and initialize all matching textareas on DOMContentLoaded Use a MutationObserver on document.body to auto-initialize textareas added later (e.g., when switching or adding i18n tabs)	`app/eventyay/base/forms/__init__.py`
Apply the new auto-expanding widget to the event frontpage text setting and adjust template tags.	Replace the frontpage_text form configuration to use I18nAutoExpandingTextarea instead of I18nTextarea Ensure the event settings template loads the static template tag library required by other assets/scripts	`app/eventyay/base/configurations/default_setting.py` `app/eventyay/eventyay_common/templates/eventyay_common/event/settings.html`

Assessment against linked issues

Issue	Objective	Addressed	Explanation
#1336	Make the 'Frontpage text' textarea in the Event Settings page automatically expand its height based on the content as the user types, instead of using a fixed-height textarea with an internal scrollbar.	✅

Possibly linked issues

Feature (forms): Auto-Expanding Textarea for Frontpage Text in Event Settings #1336: PR adds an auto-expanding I18n textarea widget and applies it to the frontpage text field as requested.

Tips and commands

Interacting with Sourcery

Trigger a new review: Comment @sourcery-ai review on the pull request.
Continue discussions: Reply directly to Sourcery's review comments.
Generate a GitHub issue from a review comment: Ask Sourcery to create an
issue from a review comment by replying to it. You can also reply to a
review comment with @sourcery-ai issue to create an issue from it.
Generate a pull request title: Write @sourcery-ai anywhere in the pull
request title to generate a title at any time. You can also comment
@sourcery-ai title on the pull request to (re-)generate the title at any time.
Generate a pull request summary: Write @sourcery-ai summary anywhere in
the pull request body to generate a PR summary at any time exactly where you
want it. You can also comment @sourcery-ai summary on the pull request to
(re-)generate the summary at any time.
Generate reviewer's guide: Comment @sourcery-ai guide on the pull
request to (re-)generate the reviewer's guide at any time.
Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
pull request to resolve all Sourcery comments. Useful if you've already
addressed all the comments and don't want to see them anymore.
Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
request to dismiss all existing Sourcery reviews. Especially useful if you
want to start fresh with a new review - don't forget to comment
@sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

Enable or disable review features such as the Sourcery-generated pull request
summary, the reviewer's guide, and others.
Change the review language.
Add, remove or edit custom review instructions.
Adjust other review settings.

Getting Help

Contact our support team for questions or feedback.
Visit our documentation for detailed guides and information.
Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

sourcery-ai

Hey there - I've reviewed your changes - here's some feedback:

The auto-expanding behavior is injected via an inline <script> on every widget render; consider moving this JS into a shared static file or a global initialization hook to avoid repeated scripts and improve maintainability.
The widget hardcodes presentation details (min/max height and transitions) directly in the style attribute; consider moving these into CSS classes so they can be more easily themed or adjusted without changing Python code.
In event/settings.html, {% load static %} is now present twice; you can remove the duplicated tag to keep the template tidy.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- The auto-expanding behavior is injected via an inline <script> on every widget render; consider moving this JS into a shared static file or a global initialization hook to avoid repeated scripts and improve maintainability.
- The widget hardcodes presentation details (min/max height and transitions) directly in the style attribute; consider moving these into CSS classes so they can be more easily themed or adjusted without changing Python code.
- In event/settings.html, {% load static %} is now present twice; you can remove the duplicated tag to keep the template tidy.

## Individual Comments

### Comment 1
<location> `app/eventyay/base/forms/__init__.py:188-197` </location>
<code_context>
+    def render(self, name, value, attrs=None, renderer=None):
</code_context>

<issue_to_address>
**issue (performance):** Embedding a full <script> block in each widget render may cause duplication and performance overhead.

Since `render` returns `html + js_code`, every widget instance adds another identical `<script>` tag to the DOM. With multiple fields this leads to repeated DOMContentLoaded handlers / observers and inflated HTML. Prefer having the widget only set `data-auto-expand` (and classes) and loading the auto-expand logic once via shared JS or a base template. If you must inline here, add a simple guard (e.g., a global flag on `window`) so the logic runs only once even if the script tag is duplicated.
</issue_to_address>

### Comment 2
<location> `app/eventyay/base/forms/__init__.py:185` </location>
<code_context>
    def __init__(self, attrs=None, **kwargs):
        default_attrs = {
            'class': 'form-control auto-expanding-textarea',
            'data-auto-expand': 'true',
            'style': 'min-height: 80px; max-height: 300px; overflow-y: hidden; resize: vertical; transition: height 0.2s ease-in-out;'
        }
        if attrs:
            if 'class' in attrs:
                default_attrs['class'] = default_attrs['class'] + ' ' + attrs['class']
            default_attrs.update(attrs)
        super().__init__(attrs=default_attrs, **kwargs)

</code_context>

<issue_to_address>
**suggestion (code-quality):** Merge dictionary updates via the union operator ([`dict-assign-update-to-union`](https://docs.sourcery.ai/Reference/Default-Rules/suggestions/dict-assign-update-to-union/))

```suggestion
            default_attrs |= attrs
```
</issue_to_address>

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

app/eventyay/base/forms/__init__.py

Copilot

Pull request overview

This PR adds an auto-expanding textarea widget for internationalized text fields in event settings, specifically applied to the frontpage text field to improve the editing experience for long descriptions.

Key changes:

Introduces I18nAutoExpandingTextarea widget with self-contained JavaScript for dynamic height adjustment
Applies the new widget to the frontpage_text field in event settings configuration
Adds template tag loading in the settings template

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 6 comments.

File	Description
app/eventyay/base/forms/init.py	Adds new `I18nAutoExpandingTextarea` widget class with inline JavaScript for auto-expanding functionality
app/eventyay/base/configurations/default_setting.py	Updates `frontpage_text` field to use the new `I18nAutoExpandingTextarea` widget and imports the widget
app/eventyay/eventyay_common/templates/eventyay_common/event/settings.html	Adds `{% load static %}` tag (though it appears to be duplicated)

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

app/eventyay/base/forms/__init__.py

app/eventyay/eventyay_common/templates/eventyay_common/event/settings.html

Copilot

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 6 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

app/eventyay/eventyay_common/templates/eventyay_common/event/settings.html

app/eventyay/base/forms/__init__.py

Copilot · 2025-11-28T15:25:19Z

app/eventyay/eventyay_common/static/eventyay-common/js/auto-expanding-textarea.js

+            var computedStyle = window.getComputedStyle(textarea);
+            var minHeight = parseInt(computedStyle.minHeight, 10) || 80;
+            var maxHeight = parseInt(computedStyle.maxHeight, 10) || 300;
+            var newHeight = Math.max(minHeight, Math.min(textarea.scrollHeight, maxHeight));
+            textarea.style.height = newHeight + 'px';
+            textarea.style.overflowY = (textarea.scrollHeight > maxHeight) ? 'auto' : 'hidden';


The height adjustment logic has a potential race condition. When setting textarea.style.height = 'auto' on line 14, the scrollHeight used on line 18 might not reflect the correct content height if the browser hasn't finished reflow. This could lead to incorrect height calculations, especially on slower devices or with large amounts of text.

Consider using requestAnimationFrame to ensure the DOM has been updated before reading scrollHeight:

function adjustHeight() { textarea.style.height = 'auto'; requestAnimationFrame(function() { var computedStyle = window.getComputedStyle(textarea); var minHeight = parseInt(computedStyle.minHeight, 10) || 80; var maxHeight = parseInt(computedStyle.maxHeight, 10) || 300; var newHeight = Math.max(minHeight, Math.min(textarea.scrollHeight, maxHeight)); textarea.style.height = newHeight + 'px'; textarea.style.overflowY = (textarea.scrollHeight > maxHeight) ? 'auto' : 'hidden'; }); }

Suggested change

var computedStyle = window.getComputedStyle(textarea);

var minHeight = parseInt(computedStyle.minHeight, 10) || 80;

var maxHeight = parseInt(computedStyle.maxHeight, 10) || 300;

var newHeight = Math.max(minHeight, Math.min(textarea.scrollHeight, maxHeight));

textarea.style.height = newHeight + 'px';

textarea.style.overflowY = (textarea.scrollHeight > maxHeight) ? 'auto' : 'hidden';

requestAnimationFrame(function() {

var computedStyle = window.getComputedStyle(textarea);

var minHeight = parseInt(computedStyle.minHeight, 10) || 80;

var maxHeight = parseInt(computedStyle.maxHeight, 10) || 300;

var newHeight = Math.max(minHeight, Math.min(textarea.scrollHeight, maxHeight));

textarea.style.height = newHeight + 'px';

textarea.style.overflowY = (textarea.scrollHeight > maxHeight) ? 'auto' : 'hidden';

});

Saksham-Sirohi

Hi! Since the frontpage text page contains only a single input field, it would be great if the textarea started with a larger initial height. More visible content improves usability, and the textarea could also adapt to the available page height.

Additionally, the current auto-resize feels a bit delayed. Making the resize more responsive (closer to instantaneous) would improve the editing experience.

enhancing these two aspects would make it feel much smoother for users.

jevinjojo · 2025-11-30T08:13:53Z

Hi @Saksham-Sirohi

text-area-widget.mp4

Saksham-Sirohi · 2025-11-30T09:04:19Z

Hi @Saksham-Sirohi
text-area-widget.mp4

Hi, this looks better. Ensure this does not cause the scrollbar to appear and adapts to different screen sizes, as I currently see a scrollbar when it takes the full height

…m/jevinjojo/eventyay into auto-expanding-textarea-frontpage

jevinjojo · 2025-12-02T09:25:04Z

Hi @Saksham-Sirohi
text-area-widget.mp4

Hi, this looks better. Ensure this does not cause the scrollbar to appear and adapts to different screen sizes, as I currently see a scrollbar when it takes the full height

Recording.2025-12-02.145416.mp4

…a#1340) * Add auto-expanding textarea * guard to prevent duplication * inline JS to separate static file and other modifications * initial text area & resize * viewport-size * initial height & scrollbar appears only inside textarea not on page --------- Co-authored-by: Mario Behling <mb@mariobehling.de>

Add auto-expanding textarea

b1f942e

sourcery-ai bot reviewed Nov 24, 2025

View reviewed changes

app/eventyay/base/forms/__init__.py Outdated Show resolved Hide resolved

app/eventyay/base/forms/__init__.py Outdated Show resolved Hide resolved

guard to prevent duplication

95da794

mariobehling requested a review from Copilot November 24, 2025 14:19

Copilot started reviewing on behalf of mariobehling November 24, 2025 14:19 View session

Merge branch 'enext' into auto-expanding-textarea-frontpage

b49d2b2

Copilot finished reviewing on behalf of mariobehling November 24, 2025 14:22

Copilot AI reviewed Nov 24, 2025

View reviewed changes

jevinjojo and others added 3 commits November 26, 2025 23:47

inline JS to separate static file and other modifications

f6c4896

Merge branch 'enext' into auto-expanding-textarea-frontpage

2b51180

Merge branch 'enext' into auto-expanding-textarea-frontpage

37cf1db

mariobehling requested a review from Copilot November 28, 2025 15:20

Copilot started reviewing on behalf of mariobehling November 28, 2025 15:21 View session

Copilot finished reviewing on behalf of mariobehling November 28, 2025 15:24

Copilot AI reviewed Nov 28, 2025

View reviewed changes

hpdang added this to Eventyay Next Nov 28, 2025

github-project-automation bot moved this to Backlog in Eventyay Next Nov 28, 2025

Saksham-Sirohi suggested changes Nov 28, 2025

View reviewed changes

jevinjojo added 2 commits November 30, 2025 12:59

initial text area & resize

f854952

viewport-size

f3f9abb

mariobehling and others added 3 commits December 1, 2025 18:13

Merge branch 'enext' into auto-expanding-textarea-frontpage

7e998d2

initial height & scrollbar appears only inside textarea not on page

e081e94

Merge branch 'auto-expanding-textarea-frontpage' of https://github.co…

198cd6c

…m/jevinjojo/eventyay into auto-expanding-textarea-frontpage

Saksham-Sirohi approved these changes Dec 2, 2025

View reviewed changes

Merge branch 'enext' into auto-expanding-textarea-frontpage

db9ccd1

mariobehling merged commit 0b80d26 into fossasia:enext Dec 2, 2025
1 check was pending

github-project-automation bot moved this from Backlog to Done in Eventyay Next Dec 2, 2025

Auto-expanding textarea for frontpage text in event settings #1340

Auto-expanding textarea for frontpage text in event settings #1340

Uh oh!

Conversation

jevinjojo commented Nov 24, 2025 • edited by sourcery-ai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Issue

Description

Summary by Sourcery

Uh oh!

sourcery-ai bot commented Nov 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviewer's Guide

Sequence diagram for auto-expanding frontpage text textarea

Class diagram for the new I18nAutoExpandingTextarea widget

File-Level Changes

Assessment against linked issues

Possibly linked issues

Interacting with Sourcery

Customizing Your Experience

Getting Help

Uh oh!

sourcery-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Nov 28, 2025

Choose a reason for hiding this comment

Uh oh!

Saksham-Sirohi left a comment

Choose a reason for hiding this comment

Uh oh!

jevinjojo commented Nov 30, 2025

Uh oh!

Saksham-Sirohi commented Nov 30, 2025

Uh oh!

jevinjojo commented Dec 2, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

jevinjojo commented Nov 24, 2025 •

edited by sourcery-ai bot

Loading

sourcery-ai bot commented Nov 24, 2025 •

edited

Loading