Disable reordering of the repeater field items

• Vayu Robins

• November 13, 2023 at 11:36 am

Hi. Has anybody attempted to disable reordering of the repeater field items? I have a situation where this would be nice to disable. I tried with some script similar to this:
field.$el[0].sortable(‘disable’);
I could not get it to work.

• Vayu Robins

• November 17, 2023 at 9:30 am

Could someone help me explain the Javascript API?

I’ve tried this, but am looking for an action that runs after Sortable is set. “ready_field” runs before.

acf.addAction('ready_field', function( field ){
    field.$el.addClass('new-way');
});

Is there more documentation on Field Actions?

• John Huebner

• November 17, 2023 at 9:36 am

Disabling this feature has come up in the past and there is no real solution. Ideas include removing the ACF action or simply hiding the control. You will find this discussion here https://support.advancedcustomfields.com/forums/topic/how-to-disable-dragdrop-ordering-function-on-a-specific-repeaters-field/, I do not know if any of those solutions work.

• Vayu Robins

• November 17, 2023 at 9:50 am

Thanks @hube2 Yes, I have seen that post and have also added my own comment a few days ago. I did not find anything there that works.

• John Huebner

• November 17, 2023 at 10:49 am

I can’t give you all of the details, I can just give you some ideas. You will need to add custom JS and you will need to add an action for both the ready and append. The first is used when the page is loaded and the second will be used when a new row is added to the repeater because ACF will automatically add the class to the new row and since the row did not exist during the ready action it will not be removed.

The following is just an untested example and may need to be corrected.

In your ready action you will need to find all of the repeater rows and remove the “order” class from the handle, something like this

// the key is for the repeater
// find all rows of the repeater
// not that the selector will need to be more specific if you have nested repeater
// where you don't want to affect the nested repeter
$('[data-key="field_63597ed1ce1cb"] tr.acf-row').each(function(index, element) {
  // this loops over each repeater row
  // convert the element to a jQuery object
  var target = $(element);
  // remove the "order" class
  target.removeClass('order');
}

You can do the same thing as above on the append actions, in fact you could set both the ready and append actions to the same function. However, the append action probably passes the element, but I don’t know if this is the repeater element or the row element or something else. I would likely just use the same function.

Here is an example from a project I worked on a while ago that auto generates unique ID for flexible content so that you can see what you need to do to add the JS to ACF

(function($){
  if (typeof acf == 'undefined') {
    return;
  }
  acf.add_action('ready append', function($el) {
    var panel_ids = [];
    $('[data-key="field_63597ed1ce1cb"] input').each(function(index, element) {
      if (element.value == '' || panel_ids.indexOf(element.value) != -1) {
        var new_id = acf.get_uniqid('pnl-');
        element.value = new_id;
        panel_ids.push(new_id);
      } else {
        panel_ids.push(element.value);
      }
    });
  });
})(jQuery);

• Vayu Robins

• November 17, 2023 at 10:54 am

Hey @hube2 Thanks a lot!! 🙂
It’s funny because I just found the same solution :-))
Here is what I got:

(function($) {
	
	jQuery( document ).ready( function( $ ) {
		
		if ( typeof acf !== 'undefined' ) {
			
			acf.addAction('load_field', function( field ) {
				if ( field.data.name === 'locations') {
					
					const locationsField = field.$el[0];
					const acfTable = locationsField.querySelector('.acf-table');
					const acfTableRows = acfTable.querySelectorAll('.acf-table .acf-row');
					
					acfTableRows.forEach((row, index) => {

						const handle = row.querySelector('.acf-row-handle');
						handle.classList.remove('order');

					});

				}
				
			});

		}
	});
	
})(jQuery);

I will have a look at what you did as well…