view of product variations doesn't set (add to cart form) attribute value correctly

When rendering a view, the value of a product attribute is not set within the attribute display of the variations "add to cart form", i.e. the product attribute set in the variation add to cart form (see view code and illustration images provided).

When rendering a view that displays products via their variations, the variation field values are shown/display/set correctly, but the attribute value in the variations add to cart form isn't set/shown correctly (see provided views code below and image of output from the view).

Notice in the view output below that it displays all the variation fields correctly. There are variation fields such as : variation title, variation body, variation image(s), etc., which are all apparent from the Views configuration fields list. The fields based view below includes the - Product:Variations - field, which is configured with the "add to cart form" formatter, so that it shows the "add to cart" button (and so on).

The problem/bug is occurring within the "add to cart form" formatter, which doesn't appear to be aware that it needs to set the attribute value based on the variation being shown. In this case there is a - Size - attribute with possible XS S M L XL, but the cart form is always showing XS. The individual variation fields displayed are aware of this. However within the - product.variations - field the code doesn't seem to be aware that it needs to set the attribute radio button (or dropdown selector ) based on the current variation being displayed. The mismatched output is readily apparent between the "cart form" value for the size and the values of the individual fields on the variation that is being displayed.

uuid: a86d31b4-6845-471a-9b82-37d108810b77
langcode: en
status: true
dependencies:
  config:
    - field.storage.commerce_product.body
    - field.storage.commerce_product.field_taxo_term_prod_brand
    - field.storage.commerce_product.field_taxo_term_prod_category
    - field.storage.commerce_product.variations
    - field.storage.commerce_product_variation.attribute_prod_attr_size_xs_s_m
    - field.storage.commerce_product_variation.field_prod_variation_body
    - field.storage.commerce_product_variation.field_prod_variation_images
    - image.style.medium
  module:
    - commerce_price
    - commerce_product
    - image
    - text
id: wws_product_variations_list_test
label: 'wws product variations list test'
module: views
description: 'wws product variations list test'
tag: 
base_table: commerce_product_variation_field_data
base_field: variation_id
core: 8.x
display:
  default:
    display_plugin: default
    id: default
    display_title: Master
    position: 0
    display_options:
      access: { type: none, options: {  } }
      cache: { type: tag, options: {  } }
      query: { type: views_query, options: { disable_sql_rewrite: false, distinct: false, replica: false, query_comment: , query_tags: {  } } }
      exposed_form: { type: basic, options: { submit_button: Apply, reset_button: false, reset_button_label: Reset, exposed_sorts_label: 'Sort by', expose_sort_order: true, sort_asc_label: Asc, sort_desc_label: Desc } }
      pager: { type: mini, options: { items_per_page: 10, offset: 0, id: 0, total_pages: null, expose: { items_per_page: false, items_per_page_label: 'Items per page', items_per_page_options: '5, 10, 25, 50', items_per_page_options_all: false, items_per_page_options_all_label: '- All -', offset: false, offset_label: Offset }, tags: { previous: ‹‹, next: ›› } } }
      style: { type: default }
      row: { type: fields }
      fields: { title_1: { id: title_1, table: commerce_product_field_data, field: title, relationship: product_id, group_type: group, admin_label: , label: , exclude: false, alter: { alter_text: false, text: , make_link: false, path: , absolute: false, external: false, replace_spaces: false, path_case: none, trim_whitespace: false, alt: , rel: , link_class: , prefix: , suffix: , target: , nl2br: false, max_length: 0, word_boundary: true, ellipsis: true, more_link: false, more_link_text: , more_link_path: , strip_tags: false, trim: false, preserve_tags: , html: false }, element_type: h4, element_class: , element_label_type: , element_label_class: , element_label_colon: false, element_wrapper_type: , element_wrapper_class: , element_default_classes: true, empty: , hide_empty: false, empty_zero: false, hide_alter_empty: true, click_sort_column: value, type: string, settings: { link_to_entity: false }, group_column: value, group_columns: {  }, group_rows: true, delta_limit: 0, delta_offset: 0, delta_reversed: false, delta_first_last: false, multi_type: separator, separator: ', ', field_api_classes: false, entity_type: commerce_product, entity_field: title, plugin_id: field }, field_taxo_term_prod_brand: { id: field_taxo_term_prod_brand, table: commerce_product__field_taxo_term_prod_brand, field: field_taxo_term_prod_brand, relationship: product_id, group_type: group, admin_label: , label: , exclude: false, alter: { alter_text: false, text: , make_link: false, path: , absolute: false, external: false, replace_spaces: false, path_case: none, trim_whitespace: false, alt: , rel: , link_class: , prefix: , suffix: , target: , nl2br: false, max_length: 0, word_boundary: true, ellipsis: true, more_link: false, more_link_text: , more_link_path: , strip_tags: false, trim: false, preserve_tags: , html: false }, element_type: , element_class: , element_label_type: , element_label_class: , element_label_colon: false, element_wrapper_type: , element_wrapper_class: , element_default_classes: true, empty: , hide_empty: false, empty_zero: false, hide_alter_empty: true, click_sort_column: target_id, type: entity_reference_label, settings: { link: false }, group_column: target_id, group_columns: {  }, group_rows: true, delta_limit: 0, delta_offset: 0, delta_reversed: false, delta_first_last: false, multi_type: separator, separator: ', ', field_api_classes: false, plugin_id: field }, field_taxo_term_prod_category: { id: field_taxo_term_prod_category, table: commerce_product__field_taxo_term_prod_category, field: field_taxo_term_prod_category, relationship: product_id, group_type: group, admin_label: , label: , exclude: false, alter: { alter_text: false, text: , make_link: false, path: , absolute: false, external: false, replace_spaces: false, path_case: none, trim_whitespace: false, alt: , rel: , link_class: , prefix: , suffix: , target: , nl2br: false, max_length: 0, word_boundary: true, ellipsis: true, more_link: false, more_link_text: , more_link_path: , strip_tags: false, trim: false, preserve_tags: , html: false }, element_type: , element_class: , element_label_type: , element_label_class: , element_label_colon: false, element_wrapper_type: , element_wrapper_class: , element_default_classes: true, empty: , hide_empty: false, empty_zero: false, hide_alter_empty: true, click_sort_column: target_id, type: entity_reference_label, settings: { link: false }, group_column: target_id, group_columns: {  }, group_rows: true, delta_limit: 0, delta_offset: 0, delta_reversed: false, delta_first_last: false, multi_type: separator, separator: ', ', field_api_classes: false, plugin_id: field }, body: { id: body, table: commerce_product__body, field: body, relationship: product_id, group_type: group, admin_label: , label: , exclude: false, alter: { alter_text: false, text: , make_link: false, path: , absolute: false, external: false, replace_spaces: false, path_case: none, trim_whitespace: false, alt: , rel: , link_class: , prefix: , suffix: , target: , nl2br: false, max_length: 0, word_boundary: true, ellipsis: true, more_link: false, more_link_text: , more_link_path: , strip_tags: false, trim: false, preserve_tags: , html: false }, element_type: , element_class: , element_label_type: , element_label_class: , element_label_colon: false, element_wrapper_type: , element_wrapper_class: , element_default_classes: true, empty: , hide_empty: false, empty_zero: false, hide_alter_empty: true, click_sort_column: value, type: text_trimmed, settings: { trim_length: 300 }, group_column: value, group_columns: {  }, group_rows: true, delta_limit: 0, delta_offset: 0, delta_reversed: false, delta_first_last: false, multi_type: separator, separator: ', ', field_api_classes: false, plugin_id: field }, title: { id: title, table: commerce_product_variation_field_data, field: title, relationship: none, group_type: group, admin_label: , label: 'Variation Title', exclude: false, alter: { alter_text: false, text: , make_link: false, path: , absolute: false, external: false, replace_spaces: false, path_case: none, trim_whitespace: false, alt: , rel: , link_class: , prefix: , suffix: , target: , nl2br: false, max_length: 0, word_boundary: true, ellipsis: true, more_link: false, more_link_text: , more_link_path: , strip_tags: false, trim: false, preserve_tags: , html: false }, element_type: strong, element_class: , element_label_type: , element_label_class: , element_label_colon: true, element_wrapper_type: , element_wrapper_class: , element_default_classes: true, empty: , hide_empty: false, empty_zero: false, hide_alter_empty: true, click_sort_column: value, type: string, settings: { link_to_entity: false }, group_column: value, group_columns: {  }, group_rows: true, delta_limit: 0, delta_offset: 0, delta_reversed: false, delta_first_last: false, multi_type: separator, separator: ', ', field_api_classes: false, entity_type: null, entity_field: title, plugin_id: field }, field_prod_variation_images: { id: field_prod_variation_images, table: commerce_product_variation__field_prod_variation_images, field: field_prod_variation_images, relationship: none, group_type: group, admin_label: , label: , exclude: false, alter: { alter_text: false, text: , make_link: false, path: , absolute: false, external: false, replace_spaces: false, path_case: none, trim_whitespace: false, alt: , rel: , link_class: , prefix: , suffix: , target: , nl2br: false, max_length: 0, word_boundary: true, ellipsis: true, more_link: false, more_link_text: , more_link_path: , strip_tags: false, trim: false, preserve_tags: , html: false }, element_type: , element_class: , element_label_type: , element_label_class: , element_label_colon: false, element_wrapper_type: , element_wrapper_class: , element_default_classes: true, empty: , hide_empty: false, empty_zero: false, hide_alter_empty: true, click_sort_column: target_id, type: image, settings: { image_style: medium, image_link:  }, group_column: , group_columns: {  }, group_rows: true, delta_limit: 0, delta_offset: 0, delta_reversed: false, delta_first_last: false, multi_type: separator, separator: ', ', field_api_classes: false, plugin_id: field }, field_prod_variation_body: { id: field_prod_variation_body, table: commerce_product_variation__field_prod_variation_body, field: field_prod_variation_body, relationship: none, group_type: group, admin_label: , label: , exclude: false, alter: { alter_text: false, text: , make_link: false, path: , absolute: false, external: false, replace_spaces: false, path_case: none, trim_whitespace: false, alt: , rel: , link_class: , prefix: , suffix: , target: , nl2br: false, max_length: 0, word_boundary: true, ellipsis: true, more_link: false, more_link_text: , more_link_path: , strip_tags: false, trim: false, preserve_tags: , html: false }, element_type: , element_class: , element_label_type: , element_label_class: , element_label_colon: false, element_wrapper_type: , element_wrapper_class: , element_default_classes: true, empty: , hide_empty: false, empty_zero: false, hide_alter_empty: true, click_sort_column: value, type: text_trimmed, settings: { trim_length: 300 }, group_column: value, group_columns: {  }, group_rows: true, delta_limit: 0, delta_offset: 0, delta_reversed: false, delta_first_last: false, multi_type: separator, separator: ', ', field_api_classes: false, plugin_id: field }, sku: { id: sku, table: commerce_product_variation_field_data, field: sku, relationship: none, group_type: group, admin_label: , label: SKU, exclude: false, alter: { alter_text: false, text: , make_link: false, path: , absolute: false, external: false, replace_spaces: false, path_case: none, trim_whitespace: false, alt: , rel: , link_class: , prefix: , suffix: , target: , nl2br: false, max_length: 0, word_boundary: true, ellipsis: true, more_link: false, more_link_text: , more_link_path: , strip_tags: false, trim: false, preserve_tags: , html: false }, element_type: , element_class: , element_label_type: , element_label_class: , element_label_colon: true, element_wrapper_type: , element_wrapper_class: , element_default_classes: true, empty: , hide_empty: false, empty_zero: false, hide_alter_empty: true, click_sort_column: value, type: string, settings: { link_to_entity: false }, group_column: value, group_columns: {  }, group_rows: true, delta_limit: 0, delta_offset: 0, delta_reversed: false, delta_first_last: false, multi_type: separator, separator: ', ', field_api_classes: false, entity_type: commerce_product_variation, entity_field: sku, plugin_id: field }, attribute_prod_attr_size_xs_s_m: { id: attribute_prod_attr_size_xs_s_m, table: commerce_product_variation__attribute_prod_attr_size_xs_s_m, field: attribute_prod_attr_size_xs_s_m, relationship: none, group_type: group, admin_label: , label: , exclude: false, alter: { alter_text: false, text: , make_link: false, path: , absolute: false, external: false, replace_spaces: false, path_case: none, trim_whitespace: false, alt: , rel: , link_class: , prefix: , suffix: , target: , nl2br: false, max_length: 0, word_boundary: true, ellipsis: true, more_link: false, more_link_text: , more_link_path: , strip_tags: false, trim: false, preserve_tags: , html: false }, element_type: , element_class: , element_label_type: , element_label_class: , element_label_colon: false, element_wrapper_type: , element_wrapper_class: , element_default_classes: true, empty: , hide_empty: false, empty_zero: false, hide_alter_empty: true, click_sort_column: target_id, type: entity_reference_label, settings: { link: false }, group_column: target_id, group_columns: {  }, group_rows: true, delta_limit: 0, delta_offset: 0, delta_reversed: false, delta_first_last: false, multi_type: separator, separator: ', ', field_api_classes: false, plugin_id: field }, price__number: { id: price__number, table: commerce_product_variation_field_data, field: price__number, relationship: none, group_type: group, admin_label: , label: , exclude: false, alter: { alter_text: false, text: , make_link: false, path: , absolute: false, external: false, replace_spaces: false, path_case: none, trim_whitespace: false, alt: , rel: , link_class: , prefix: , suffix: , target: , nl2br: false, max_length: 0, word_boundary: true, ellipsis: true, more_link: false, more_link_text: , more_link_path: , strip_tags: false, trim: false, preserve_tags: , html: false }, element_type: , element_class: , element_label_type: , element_label_class: , element_label_colon: false, element_wrapper_type: , element_wrapper_class: , element_default_classes: true, empty: , hide_empty: false, empty_zero: false, hide_alter_empty: true, click_sort_column: number, type: commerce_price_default, settings: { strip_trailing_zeroes: false, display_currency_code: false }, group_column: , group_columns: {  }, group_rows: true, delta_limit: 0, delta_offset: 0, delta_reversed: false, delta_first_last: false, multi_type: separator, separator: ', ', field_api_classes: false, entity_type: commerce_product_variation, entity_field: price, plugin_id: field }, variations: { id: variations, table: commerce_product__variations, field: variations, relationship: product_id, group_type: group, admin_label: , label: , exclude: false, alter: { alter_text: false, text: , make_link: false, path: , absolute: false, external: false, replace_spaces: false, path_case: none, trim_whitespace: false, alt: , rel: , link_class: , prefix: , suffix: , target: , nl2br: false, max_length: 0, word_boundary: true, ellipsis: true, more_link: false, more_link_text: , more_link_path: , strip_tags: false, trim: false, preserve_tags: , html: false }, element_type: , element_class: , element_label_type: , element_label_class: , element_label_colon: false, element_wrapper_type: , element_wrapper_class: , element_default_classes: true, empty: , hide_empty: false, empty_zero: false, hide_alter_empty: true, click_sort_column: target_id, type: commerce_add_to_cart, settings: { combine: false }, group_column: target_id, group_columns: {  }, group_rows: true, delta_limit: 0, delta_offset: 0, delta_reversed: false, delta_first_last: false, multi_type: separator, separator: ', ', field_api_classes: false, plugin_id: field } }
      filters: {  }
      sorts: {  }
      title: 'product variation list test'
      header: {  }
      footer: {  }
      empty: {  }
      relationships: { product_id: { id: product_id, table: commerce_product_variation_field_data, field: product_id, relationship: none, group_type: group, admin_label: Product, required: false, entity_type: commerce_product_variation, entity_field: product_id, plugin_id: standard } }
      arguments: {  }
      display_extenders: {  }
    cache_metadata:
      max-age: -1
      contexts: ['languages:language_content', 'languages:language_interface', url.query_args]
      tags: ['config:field.storage.commerce_product.body', 'config:field.storage.commerce_product.field_taxo_term_prod_brand', 'config:field.storage.commerce_product.field_taxo_term_prod_category', 'config:field.storage.commerce_product.variations', 'config:field.storage.commerce_product_variation.attribute_prod_attr_size_xs_s_m', 'config:field.storage.commerce_product_variation.field_prod_variation_body', 'config:field.storage.commerce_product_variation.field_prod_variation_images']
  page_1:
    display_plugin: page
    id: page_1
    display_title: Page
    position: 1
    display_options:
      display_extenders: {  }
      path: productvariationslist
    cache_metadata:
      max-age: -1
      contexts: ['languages:language_content', 'languages:language_interface', url.query_args]
      tags: ['config:field.storage.commerce_product.body', 'config:field.storage.commerce_product.field_taxo_term_prod_brand', 'config:field.storage.commerce_product.field_taxo_term_prod_category', 'config:field.storage.commerce_product.variations', 'config:field.storage.commerce_product_variation.attribute_prod_attr_size_xs_s_m', 'config:field.storage.commerce_product_variation.field_prod_variation_body', 'config:field.storage.commerce_product_variation.field_prod_variation_images']

In the image below notice that the value on the radio button set is always XS despite the fact that a variation for S or M or L or XL is being displayed in the list. Notice also that the just above the actual individual field shows the correct value that should be set within the radio button set.

------------------------
This report is part of a larger project effort to build a full featured open source commerce 2.x demonstration site for community use.

[reporting commerce 2.x problems to help make dc2x the best that it might be]