Issue #3003459 by chr.fritsch: Implement size widget setting

config/schema/select2.schema.yml

@@ -1,6 +1,10 @@
 field.widget.settings.select2:
   type: field.widget.settings.options_select
   label: 'Select2 simple widget'
+  mapping:
+    width:
+      type: string
+      label: 'Field width'
 
 field.widget.settings.select2_entity_reference:
   type: field.widget.settings.select2

js/select2.js

@@ -19,7 +19,7 @@
             text: term
           };
         };
-        $(this).css('width', '100%').select2(config);
+        $(this).select2(config);
 
         // Copied from https://github.com/woocommerce/woocommerce/blob/master/assets/js/admin/wc-enhanced-select.js#L118
         if (config.hasOwnProperty('ajax')) {

src/Element/Select2.php

@@ -161,6 +161,7 @@ public static function preRenderSelect($element) {
       'maximumSelectionLength' => $multiple ? $element['#cardinality'] : 0,
       'tokenSeparators' => $element['#autocreate'] ? [','] : [],
       'selectOnClose' => $element['#autocomplete'],
+      'width' => '100%',
     ];
 
     $selector = $element['#attributes']['data-drupal-selector'];

src/Plugin/Field/FieldWidget/Select2Widget.php

@@ -22,13 +22,64 @@
  */
 class Select2Widget extends OptionsSelectWidget {
 
+  /**
+   * {@inheritdoc}
+   */
+  public static function defaultSettings() {
+    return [
+      'width' => '100%',
+    ] + parent::defaultSettings();
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function settingsForm(array $form, FormStateInterface $form_state) {
+    $element['width'] = [
+      '#type' => 'textfield',
+      '#title' => t('Field width'),
+      '#default_value' => $this->getSetting('width'),
+      '#description' => $this->t("Define a width for the select2 field. It can be either 'element', 'style', 'resolve' or any possible CSS unit. E.g. 500px, 50%, 200em. See the <a href='https://select2.org/appearance#container-width'>select2 documentation</a> for further explanations."),
+      '#required' => TRUE,
+      '#size' => '10',
+      '#element_validate' => [[$this, 'validateWidth']],
+    ];
+    return $element;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function settingsSummary() {
+    $summary = [];
+    $summary[] = t('Field width: @width', ['@width' => $this->getSetting('width')]);
+    return $summary;
+  }
+
+  /**
+   * Validate the width textfield.
+   *
+   * @param array $element
+   *   The form element.
+   * @param \Drupal\Core\Form\FormStateInterface $form_state
+   *   The form state object.
+   */
+  public function validateWidth(array $element, FormStateInterface $form_state) {
+    if (!preg_match("/^(\d+(cm|mm|in|px|pt|pc|em|ex|ch|rem|vm|vh|vmin|vmax|\%)|element|style|resolve)$/i", $element['#value'])) {
+      $form_state->setError($element, $this->t('Width is not in a valid format.'));
+    }
+  }
+
   /**
    * {@inheritdoc}
    */
   public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) {
     $element = parent::formElement($items, $delta, $element, $form, $form_state);
     $element['#type'] = 'select2';
     $element['#cardinality'] = $this->fieldDefinition->getFieldStorageDefinition()->getCardinality();
+    $element['#select2'] = [
+      'width' => $this->getSetting('width'),
+    ];
 
     return $element;
   }