Restore cursor position on #ajax 'input' or 'keyup' event

Created on 7 April 2019, over 5 years ago
Updated 16 May 2023, over 1 year ago

When using #ajax with the 'input' event (same with 'keyup') on a text field to replace the field itself, the cursor position is getting lost so the cursor is reset to the beginning of the text field.

It seems rather easy to store and restore the cursor position, see
https://stackoverflow.com/questions/35400504/the-input-elements-cursor-p..., and I think the events' current behavior isn't okay in terms of accessibility, so we should do it.

πŸ› Bug report
Status

Active

Version

10.1 ✨

Component
AjaxΒ  β†’

Last updated 1 day ago

Created by

Pancho UTC+2 πŸ‡ͺπŸ‡Ί EU

Live updates comments and jobs are added and updated live.
  • Usability

    Makes Drupal easier to use. Preferred over UX, D7UX, etc.

  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • πŸ‡³πŸ‡ΏNew Zealand quietone

    @Pancho Thank you for reporting this problem.

    Is this issue still a problem? If so, can we have steps to reproduce.

    Since we need more information to move forward with this issue, I am keeping the status at Postponed (maintainer needs more info). If we don't receive additional information to help with the issue, it may be closed after three months.

    Thanks!

  • Status changed to Active over 1 year ago
  • πŸ‡·πŸ‡ΊRussia xandeadx

    Code to reproduce:

      public function buildForm(array $form, FormStateInterface $form_state): array {
        $form['textfield'] = [
          '#type' => 'textfield',
          '#ajax' => [
            'callback' => '::ajaxUpdateTextfield',
            'event' => 'input',
            'wrapper' => 'textfield',
          ],
          '#prefix' => '<div id="textfield">',
          '#suffix' => '</div>',
        ];
    
        return $form;
      }
    
      public static function ajaxUpdateTextfield(array $form, FormStateInterface $form_state): array {
        return $form['textfield'];
      }
    
  • πŸ‡·πŸ‡ΊRussia xandeadx

    Video:

  • πŸ‡¨πŸ‡¦Canada mgifford Ottawa, Ontario

    Thanks for the video @xandeadx that could be really annoying.

Production build 0.71.5 2024