Add html id

Closes #3519517

modules/ui_patterns_ui/src/Element/UiPComponentFormDisplaysForm.php

@@ -4,6 +4,7 @@ declare(strict_types=1);
 
 namespace Drupal\ui_patterns_ui\Element;
 
+use Drupal\Component\Utility\Html;
 use Drupal\Component\Utility\NestedArray;
 use Drupal\Core\Entity\EntityTypeManagerInterface;
 use Drupal\Core\Form\FormStateInterface;
@@ -39,6 +40,9 @@ class UiPComponentFormDisplaysForm extends ComponentForm {
       'component_id' => $component_id,
       'status' => TRUE,
     ]);
+    uasort($matched_displays, function ($a, $b) {
+      return strnatcasecmp((string) $a->label(), (string) $b->label());
+    });
     return $matched_displays;
   }
 
@@ -108,7 +112,7 @@ class UiPComponentFormDisplaysForm extends ComponentForm {
       ],
     ];
     if ($display_id === '_component_form') {
-      $element["display"]['value_' . $display_id] = [
+      $element["display"]['value_' . Html::getId($display_id)] = [
         '#type' => 'component_form',
         '#allow_override' => TRUE,
         '#component_id' => $component_id,
@@ -127,7 +131,7 @@ class UiPComponentFormDisplaysForm extends ComponentForm {
       ];
     }
     elseif ($display_id) {
-      $element["display"]['value_' . $display_id] = [
+      $element["display"]['value_' . Html::getId($display_id)] = [
         '#type' => 'uip_display_form',
         '#display_id' => $display_id,
         '#component_id' => $component_id,
@@ -185,18 +189,18 @@ class UiPComponentFormDisplaysForm extends ComponentForm {
    * {@inheritdoc}
    */
   public static function elementValidate(array &$element, FormStateInterface $form_state): void {
-    $display_id = $element['display']['display_id']['#value'];
-    if (isset($element['display']['value_' . $display_id]['#value'])) {
-      $element['#value'] = $element['display']['value_' . $display_id]['#value'];
+    $display_id = $element['display']['display_id']['#value'] ?? NULL;
 
-      if (isset($element['display']['display_id'])
-        && $element['display']['display_id']['#value'] !== '_component_form') {
-        $element['#value']['display_id'] = $element['display']['display_id']['#value'];
-      }
-
-      $element['#value']['component_id'] = $element['display']['component_id']['#value'];
-      $form_state->setValueForElement($element, $element['#value']);
+    if (empty($display_id) || !isset($element['display']['value_' . Html::getId($display_id)]['#value'])) {
+      return;
+    }
+    $value = $element['display']['value_' . Html::getId($display_id)]['#value'];
+    $element['#value'] = $value;
+    if (($element['display']['display_id']['#value'] ?? '') !== '_component_form') {
+      $element['#value']['display_id'] = $element['display']['display_id']['#value'];
     }
+    $element['#value']['component_id'] = $element['display']['component_id']['#value'];
+    $form_state->setValueForElement($element, $element['#value']);
   }
 
 }