Skip to content

Issue #2 - [UX] Submit button should be disabled when input field is empty #6

@zenocross

Description

@zenocross

Description

In the chat interface, the submit button remains active even when the input field is empty, allowing users to send blank messages which creates a poor user experience.

Current Behavior

  • Chat input field is empty
  • Submit button remains clickable and highlighted
  • User can click submit with no text
  • Empty or invalid messages may be sent

Expected Behavior

  • When input field is empty, submit button is disabled
  • Button appears grayed out when disabled
  • Button becomes active only when user types text
  • Visual feedback indicates button state clearly

Steps to Reproduce

  1. Open chat interface in the app
  2. Ensure text input field is empty
  3. Observe submit button state
  4. Button is active and can be clicked
  5. Clicking may send empty message

Proposed Solution

Add input validation that:

  • Checks if text input is empty or contains only whitespace
  • Disables submit button when input is invalid
  • Updates button styling to show disabled state
  • Re-enables button when valid text is entered

Technical Context

  • Component: Chat page UI
  • Type: UX enhancement
  • Framework: Flutter/Dart
  • File: Single chat widget file
  • Implementation: State management for button enabled/disabled state

Download https://cap.so/ to record your screen (use Studio mode). Export as an mp4, and drag and drop into an issue comment below.

Metadata

Metadata

Assignees

No one assigned

    Labels

    uxAuto-created label

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions