Wrapped change event to make CVR element play (more) nicely with webform states

js/scripts.js

@@ -0,0 +1,11 @@
+(function($, Drupal) {
+  // Handle the `change` event which is triggered by webform states when an
+  // element is hidden or shown.
+  $('.os2forms-cvr-lookup-cvr-element').on('change', function(event) {
+    // Trigger AJAX event only when webform states is not triggering the
+    // `change` event and when the CVR element is actually visible.
+    if ('webform.states' !== extraParameters && $(this).is(':visible')) {
+      $(this).trigger('os2forms_cvr_lookup:change')
+    }
+  })
+})(jQuery, Drupal);

os2forms_cvr_lookup.libraries.yml

@@ -0,0 +1,6 @@
+os2forms_cvr_lookup:
+  version: VERSION
+  js:
+    js/scripts.js: {}
+  dependencies:
+     - core/drupal.ajax

src/Element/CvrElement.php

@@ -23,7 +23,7 @@ public function getInfo() {
     $element['#element_validate'] = [[$this, 'validate']];
     $element['#ajax'] = [
       'callback' => [$this, 'ajaxCallback'],
-      'event' => 'change',
+      'event' => 'os2forms_cvr_lookup:change',
       'progress' => [
         'type' => 'throbber',
         'message' => $this->t('Looking up CVR'),

src/Plugin/WebformElement/CvrElement.php

@@ -3,6 +3,7 @@
 namespace Drupal\os2forms_cvr_lookup\Plugin\WebformElement;
 
 use Drupal\webform\Plugin\WebformElement\TextField;
+use Drupal\webform\WebformSubmissionInterface;
 
 /**
  * @WebformElement(
@@ -14,4 +15,13 @@
  */
 class CvrElement extends TextField {
 
+  /**
+   * {@inheritdoc}
+   */
+  public function prepare(array &$element, WebformSubmissionInterface $webform_submission = null)
+  {
+    $element['#attributes']['class'][] = 'os2forms-cvr-lookup-cvr-element';
+    $element['#attached']['library'][] = 'os2forms_cvr_lookup/os2forms_cvr_lookup';
+    parent::prepare($element, $webform_submission);
+  }
 }