acf-set-layout-title-on-change.js

/**
 * Wait until ACF is ready
 */
acf.addAction('ready', function () {

  ec_layout_titles_on_change();

});

/**
 * Update the title of dedicated elements parent layout when an onchange event occurs.
 */
function ec_layout_titles_on_change()
{

  // Use ACFs wrapper attributes to set a class of your choice on the fields whose onchange event
  // should trigger layout title re-rendering.
  let selectors = '.ec-layout-title-setter input, .ec-layout-title-setter select';

  jQuery(document).on('change', selectors, function() {

    let $flexible_content_element = jQuery(this).closest('.acf-field-flexible-content');

    if($flexible_content_element.length === 0) {
      return;
    }

    let $flexible_content_acf_element = acf.getField($flexible_content_element.attr('data-key'));

    if($flexible_content_acf_element.length === 0) {
      return;
    }

    let $layout_element = jQuery(this).closest('.layout');

    if($layout_element.length === 0) {
      return;
    }

    let $layout_acf_element = $flexible_content_acf_element.$layout($layout_element.index());

    if($layout_acf_element.length === 0) {
      return;
    }

    $flexible_content_acf_element.renderLayout($layout_acf_element);

  });

}