Problem/Motivation
When I use multistep ajax webform with computed field, it redirect me to first page with validation error.
Steps to reproduce
1. Create a multistep webform having ajax setting enabled.
2. In first page, add basic field like name, company.
3. In second page add field Fuel Type (select list), Fuel Price (Number) and per (computed field).
4. There is custom ajax which run when fuel type is change to get fuel price
This works correctly but when I add computed field 'per' in second page everything get break. It redirect me to first page with validation error.
Below is source code for the same.
project_identification:
'#type': wizard_page
'#title': 'Project identification'
name_of_the_project:
'#type': textfield
'#title': 'Name of the project'
'#required': true
fuel_page:
'#type': wizard_page
'#title': 'Fuel Page'
fuel_and_material:
'#type': container
'#attributes':
class:
- o-grid
- o-grid--three
fuel_type:
'#type': entity_select
'#title': 'Fuel Selected'
'#target_type': taxonomy_term
'#selection_handler': 'default:taxonomy_term'
'#selection_settings':
target_bundles:
fuel: fuel
fuel_cost:
'#type': number
'#title': 'Fuel Cost'
'#title_display': invisible
'#autocomplete': 'off'
'#required': true
fuel_per:
'#type': computed_twig
'#title': per
'#title_display': inline
'#template': |-
{% if data.fuel_type|length %}
per {{ webform_token('[webform_submission:values:fuel_type:entity:price_per:clear]', webform_submission) }}
{% endif %}
'#ajax': true
Custom ajax code:
use Drupal\Core\Form\FormStateInterface;
/**
* Implements hook_form_alter().
*/
function webform_test_form_alter(&$form, &$form_state, $form_id) {
if (!empty($form['#webform_id']) && $form['#webform_id'] == 'energy_saving_calculator_latest') {
if ($form_state->get('current_page') == "fuel_page") {
// Add an AJAX callback to the select box element.
$form['elements']['fuel_page']['fuel_and_material']['fuel_type']['#ajax'] = [
'callback' => 'update_fuel_price',
'wrapper' => 'price-wrapper',
'effect' => 'fade',
];
$form['elements']['fuel_page']['fuel_and_material']['fuel_cost']['#field_prefix'] = '<div id="price-wrapper">';
$form['elements']['fuel_page']['fuel_and_material']['fuel_cost']['#field_suffix'] = '</div>';
}
}
}
/**
* AJAX callback function to update the price textfield.
*/
function update_fuel_price(array &$form, $form_state) {
$price = 70;
// Here I have removed all my calculation and kept simple for test.
$form['elements']['fuel_page']['fuel_and_material']['fuel_cost']['#value'] = $price;
return $form['elements']['fuel_page']['fuel_and_material']['fuel_cost'];
}
It seem to be bug. Hope above step help to replicate issue.
Proposed resolution
Remaining tasks
User interface changes
API changes
Data model changes