Can select multiple media items on a field with a limit of one media item

Problem/Motivation

I am running into an issue when adding media into a field that allows only one item. I am adding a block in Layout Builder. The block I am adding has a media field with a limit of one item. However, I can check more than one image on that field by clicking on the image even though the input field is disabled after one image is selected. And I can then insert those two images into the block but I can't save it and I can't remove the images so I have to start over.

I found that the issue is in media_library.click_to_select.js line 14.

$input.prop('checked', !$input.prop('checked')).trigger('change');

Steps to reproduce

Note: Make sure that one of the content types has layout builder enabled.

• Create a "Test" block with a media field
• Set "Allowed number of values" to 1
• Set the "Media type" to Image and save
• Create a new node of the content type that has Layout Builder enabled
• Click "Layout" to add the new block
• Click "Add Media" and select more than one image

You'll notice that you can select more than one image and you can click Insert Selected.

Proposed resolution

Change media_library.click_to_select.js line 14 to:

if (!$input.prop('disabled')) {
  $input.prop('checked', !$input.prop('checked')).trigger('change');
}

I also noticed that there is a es6.js version of the file and a similar change would apply there but I am not sure what the criteria is that would allow that file to be used.