Contrib.social

Can't type in Select2 list text fields

Open on Drupal.org →
Created on 30 December 2022, over 1 year ago
Updated 13 March 2024, 4 months ago

When editing a paragraph with a select2 → list text (select) field, it renders properly but you cannot type in the textfield at the top to filter the results.

It is a known issue in the select2 → community that select2 fields do not behave properly in modals without extra work. The same goes for Drupal jQuery modal dialogs.

The solution is to set Form's class as the dropdownParent.

When using Form API, do the following to ensure your custom select2 field works in the layout_paragraphs modal.

// $form_id uses underscores, but the rendered form uses hyphens in the class.
$form_class = str_replace('_', '-', $form_id);
$form['select2'] = [
  '#type' => 'select2',
  '#title' => t('My select2 form element'),
  '#options' => [
    'foo',
    'bar',
  ],
  '#select2' => [
    // Set the dropdownParent to the form's class.
    'dropdownParent' => '.' . $form_class,
  ],
];

For regular Drupal fields, a patch will be attached in the next comment.

🐛 Bug report
Status

Active

Version

2.0

Component

Code

Created by

🇺🇸United States andrewmriv Southern California

Live updates comments and jobs are added and updated live.
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.

  • Comment over 1 year ago →
    Falco010

    We had the same issue and the patch provided fixed the issue for us, thanks @andrewmriv!

  • Status changed to RTBC 7 months ago
  • Comment 7 months ago →
    🇨🇦Canada endless_wander

    Thank you, +1 for the patch. Fixed same problem I was having with Select2 elements in the Layout Paragraphs modal.

  • Status changed to Active 7 months ago
  • Comment 7 months ago →
    🇺🇸United States justin2pin

    Thanks for this patch. If I'm understanding this correctly, though, the issue is actually with the select2 module, and not Layout Paragraphs? I think someone should open and issue / write a patch for select2 that correctly assigns the dropdownParent attribute more holistically.

  • Comment 4 months ago →
    🇺🇸United States DaleTrexel Minnesota, USA

    I was not able to get the patch in #2 to work for my site. Array key 'widget' does not exist.

    However, 🐛 Issue with z-index when opening in modal dialog RTBC in the Select2 issue queue DOES work for me in my use case (testing patch #17). So, as @justin2pin suggests, this is probably better fixed in Select2 for all modals, rather than here for Layout Paragraphs. And no new issue/patch needs to be created!

contrib.social Blog FAQ Discussions
Production build 0.69.0 2024