Tập tành fix Webform - Textarea - counter issue trên Drupal 9

Validate textarea

$form['actions']['submit']['#validate'][] = 'checkout_confirm_email_form_validate';     

function checkout_confirm_email_form_validate($form, &$form_state) {    

  unset($form['submitted']['q2_textarea']['#needs_validation']);

  if(empty($form['submitted']['q1_textarea']['#value'])){

    var_dump("aaaaaaaaaaaaaaa")  ;    

  } else {

    var_dump("vvvvvvvvvvvvvvvvvvvvvvv");

  }

}

Steps to reproduce

Create a weform with Textarea field

Under Form Validation Define Counter - Character, Countet Maimum - 1000, Counter Maximum Message - %\%d Characters remaining

Now from Front End:

Navigate to Webform

Start filling in the Textarea field (Enter the charaters along with some Enter keys pressed (to goto Next Line) from the Keyboard

You will observer Character count going to showing you negative value (Attached Screenshot)

Proposed resolution

Counter should stop at 0

(function (Drupal) {
  
    'use strict';
  
    // @see https://github.com/ractoon/jQuery-Text-Counter#options
    Drupal.webform = Drupal.webform || {};
    Drupal.webform.counter = Drupal.webform.counter || {};
    Drupal.webform.counter.options = {stopInputAtMaximum: true};
  
  })(Drupal);

Details

uuid: 3c82421d-94e3-4e92-a379-2da84dd7d471
langcode: en
status: open
dependencies: {  }
open: null
close: null
weight: 0
uid: 1
template: false
archive: false
id: issue_3238244
title: 'Issue #3238244: Webform - Textarea - counter issue'
description: ''
category: ''
elements: |
  textarea:
    '#type': textarea
    '#title': textarea
    '#counter_type': character
    '#counter_maximum': 100
css: ''
javascript: |
  (function (Drupal) {
  
    'use strict';
  
    // @see https://github.com/ractoon/jQuery-Text-Counter#options
    Drupal.webform = Drupal.webform || {};
    Drupal.webform.counter = Drupal.webform.counter || {};
    Drupal.webform.counter.options = {stopInputAtMaximum: true};
  
  })(Drupal);
  
settings:
  ajax: false
  ajax_scroll_top: form
  ajax_progress_type: ''
  ajax_effect: ''
  ajax_speed: null
  page: true
  page_submit_path: ''
  page_confirm_path: ''
  page_theme_name: ''
  form_title: both
  form_submit_once: false
  form_exception_message: ''
  form_open_message: ''
  form_close_message: ''
  form_previous_submissions: true
  form_confidential: false
  form_confidential_message: ''
  form_remote_addr: true
  form_convert_anonymous: false
  form_prepopulate: false
  form_prepopulate_source_entity: false
  form_prepopulate_source_entity_required: false
  form_prepopulate_source_entity_type: ''
  form_reset: false
  form_disable_autocomplete: false
  form_novalidate: false
  form_disable_inline_errors: false
  form_required: false
  form_unsaved: false
  form_disable_back: false
  form_submit_back: false
  form_autofocus: false
  form_details_toggle: false
  form_access_denied: default
  form_access_denied_title: ''
  form_access_denied_message: ''
  form_access_denied_attributes: {  }
  form_file_limit: ''
  share: false
  share_node: false
  share_theme_name: ''
  share_title: true
  share_page_body_attributes: {  }
  submission_label: ''
  submission_log: false
  submission_views: {  }
  submission_views_replace: {  }
  submission_user_columns: {  }
  submission_user_duplicate: false
  submission_access_denied: default
  submission_access_denied_title: ''
  submission_access_denied_message: ''
  submission_access_denied_attributes: {  }
  submission_exception_message: ''
  submission_locked_message: ''
  submission_excluded_elements: {  }
  submission_exclude_empty: false
  submission_exclude_empty_checkbox: false
  previous_submission_message: ''
  previous_submissions_message: ''
  autofill: false
  autofill_message: ''
  autofill_excluded_elements: {  }
  wizard_progress_bar: true
  wizard_progress_pages: false
  wizard_progress_percentage: false
  wizard_progress_link: false
  wizard_progress_states: false
  wizard_auto_forward: true
  wizard_auto_forward_hide_next_button: false
  wizard_keyboard: true
  wizard_start_label: ''
  wizard_preview_link: false
  wizard_confirmation: true
  wizard_confirmation_label: ''
  wizard_track: ''
  wizard_prev_button_label: ''
  wizard_next_button_label: ''
  wizard_toggle: false
  wizard_toggle_show_label: ''
  wizard_toggle_hide_label: ''
  preview: 0
  preview_label: ''
  preview_title: ''
  preview_message: ''
  preview_attributes: {  }
  preview_excluded_elements: {  }
  preview_exclude_empty: true
  preview_exclude_empty_checkbox: false
  draft: none
  draft_multiple: false
  draft_auto_save: false
  draft_saved_message: ''
  draft_loaded_message: ''
  draft_pending_single_message: ''
  draft_pending_multiple_message: ''
  confirmation_type: page
  confirmation_title: ''
  confirmation_message: ''
  confirmation_url: ''
  confirmation_attributes: {  }
  confirmation_back: true
  confirmation_back_label: ''
  confirmation_back_attributes: {  }
  confirmation_exclude_query: false
  confirmation_exclude_token: false
  confirmation_update: false
  limit_total: null
  limit_total_interval: null
  limit_total_message: ''
  limit_total_unique: false
  limit_user: null
  limit_user_interval: null
  limit_user_message: ''
  limit_user_unique: false
  entity_limit_total: null
  entity_limit_total_interval: null
  entity_limit_user: null
  entity_limit_user_interval: null
  purge: none
  purge_days: null
  results_disabled: false
  results_disabled_ignore: false
  results_customize: false
  token_view: false
  token_update: false
  token_delete: false
  serial_disabled: false
access:
  create:
    roles:
      - anonymous
      - authenticated
    users: {  }
    permissions: {  }
  view_any:
    roles: {  }
    users: {  }
    permissions: {  }
  update_any:
    roles: {  }
    users: {  }
    permissions: {  }
  delete_any:
    roles: {  }
    users: {  }
    permissions: {  }
  purge_any:
    roles: {  }
    users: {  }
    permissions: {  }
  view_own:
    roles: {  }
    users: {  }
    permissions: {  }
  update_own:
    roles: {  }
    users: {  }
    permissions: {  }
  delete_own:
    roles: {  }
    users: {  }
    permissions: {  }
  administer:
    roles: {  }
    users: {  }
    permissions: {  }
  test:
    roles: {  }
    users: {  }
    permissions: {  }
  configuration:
    roles: {  }
    users: {  }
    permissions: {  }
handlers: {  }
variants: {  }