Problem/Motivation

If cardinality of a field is set as 'n', the entity create/edit forms will render the field widget 'n' number of times. It would be nice to render only one widget, and provide an 'Add another item' button to add more field values in such cases, to match the unlimited cardinality behavior.

Steps to reproduce

  • Install Drupal with the standard profile
  • Add a text field to the article content type. Set the cardinality to 4 (limited)
  • Try to create an article content. The text field widget will be rendered 4 times.

Proposed resolution

  • Provide an option to render only one widget in form, in the 'Manage form display' settings of the field (Current name: Show add more button)
  • If this option is selected, only one widget will be rendered in the form along with an 'Add another item' button to add the remaining ones.


/files/issues/2024-08-13/Add%20another%20item%20btn.png

Remaining tasks

  • Create a merge request
  • Add tests
  • Review
  • Commit

User interface changes

A new checkbox 'Show add more button' in the widget settings of fields with limited cardinality (>1) that provides 'Add another item' button instead of rendering the maximum number of widgets.

Introduced terminology

None

API changes

None

Data model changes

None

Release notes snippet

N/A

Issue fork drupal-1156338

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

LarsKramer’s picture

Version: 7.x-dev » 8.x-dev

Nice idea. Moving to Drupal 8 where feature requests belong.

LarsKramer’s picture

Actually, for the image and file field widgets this has already been implemented. Only one field is shown on the node add/edit form no matter what value is set as the maximum number of fields. So we just need the text field widget to work the same way. Or alternatively, include a widget setting for how many empty fields should be shown initially.

Version: 8.0.x-dev » 8.1.x-dev

Drupal 8.0.6 was released on April 6 and is the final bugfix release for the Drupal 8.0.x series. Drupal 8.0.x will not receive any further development aside from security fixes. Drupal 8.1.0-rc1 is now available and sites should prepare to update to 8.1.0.

Bug reports should be targeted against the 8.1.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.2.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.1.x-dev » 8.2.x-dev

Drupal 8.1.9 was released on September 7 and is the final bugfix release for the Drupal 8.1.x series. Drupal 8.1.x will not receive any further development aside from security fixes. Drupal 8.2.0-rc1 is now available and sites should prepare to upgrade to 8.2.0.

Bug reports should be targeted against the 8.2.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.6 was released on February 1, 2017 and is the final full bugfix release for the Drupal 8.2.x series. Drupal 8.2.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.3.0 on April 5, 2017. (Drupal 8.3.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.3.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.6 was released on August 2, 2017 and is the final full bugfix release for the Drupal 8.3.x series. Drupal 8.3.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.4.0 on October 4, 2017. (Drupal 8.4.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.4.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

daniel korte’s picture

Version: 8.4.x-dev » 8.5.x-dev
Issue summary: View changes
Status: Active » Needs review
StatusFileSize
new2.84 KB

Attached is a fix so that limited cardinality fields behave like unlimited cardinality fields.

Status: Needs review » Needs work
daniel korte’s picture

Status: Needs work » Needs review
StatusFileSize
new2.62 KB

Take two.

Status: Needs review » Needs work

Version: 8.5.x-dev » 8.6.x-dev

Drupal 8.5.0-alpha1 will be released the week of January 17, 2018, which means new developments and disruptive changes should now be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.6.x-dev » 8.7.x-dev

Drupal 8.6.0-alpha1 will be released the week of July 16, 2018, which means new developments and disruptive changes should now be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.7.x-dev » 8.8.x-dev

Drupal 8.7.0-alpha1 will be released the week of March 11, 2019, which means new developments and disruptive changes should now be targeted against the 8.8.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

guptahemant’s picture

Issue tags: +Needs tests

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

stefaniev’s picture

The patch from #9 works for me, on Drupal 9.2.5, thanks!

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

idiaz.roncero’s picture

+1 to having this in Core.

Having all the fields already present on the page is bad UX as many users understand the need to fill all the inputs, while the "Add more" pattern is much more user-friendly as it clearly indicates the possibilities (either remain as you are or add a new item).

crmn’s picture

patch for drupal 9.3.3

briantschu’s picture

The patch from #22 applies to Drupal 9.3.x but is missing some changes that were present in the patch from #9. Adding an updated patch that works with 9.3.x and has all the changes from #9.

marcoscano’s picture

This patch adds the same button the unlimited cardinality fields have, which rebuilds the form element using AJAX.
A different alternative, using clientside JS to hide/show one new empty element at a time, is implemented in this contrib module: https://www.drupal.org/project/sam

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

very_random_man’s picture

The patch in #23 works for me on 9.5. :-)

dpi’s picture

Seems to me like there might be a lot of crossover between this and #2980806: Fields with unlimited cardinality show 1 extra input field

Maybe both should be triaged into a _Optimising add more button behavior_ issue

anybody’s picture

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

jsutta’s picture

StatusFileSize
new2.37 KB

Rerolled the patch for Drupal 10.2.0.

jeroent’s picture

Issue tags: +Needs reroll

jeroent’s picture

Status: Needs work » Needs review
Issue tags: -Needs reroll
StatusFileSize
new3.18 KB
anybody’s picture

smustgrave’s picture

Status: Needs review » Postponed (maintainer needs more info)
Issue tags: +Needs issue summary update

Moving to PNMI if anyone can confirm #35 is a duplicate, then this can be closed.

If not a duplicate it should move to NW for test coverage and issue summary update.

el7cosmos’s picture

Status: Postponed (maintainer needs more info) » Needs work

This is still missing "Add More" button.

Also, not a duplicate of related issue.

p-neyens’s picture

StatusFileSize
new3.11 KB

Here a patch for D10.2.5 with a fix for "Warning: Undefined array key "#delta" in Drupal\Core\Field\WidgetBase::addMoreAjax() (regel 340 van /var/www/html/core/lib/Drupal/Core/Field/WidgetBase.php)"

el7cosmos’s picture

StatusFileSize
new47.1 KB

Updated the MR, added a widget option to opt-in

widget option

akhil babu’s picture

Assigned: Unassigned » akhil babu
akhil babu’s picture

Assigned: akhil babu » Unassigned
Status: Needs work » Needs review

I have added the tests. Ready for review

smustgrave’s picture

Status: Needs review » Needs work

Issue summary still incomplete

Have not reviewed

akhil babu’s picture

Issue summary: View changes
akhil babu’s picture

Issue summary: View changes
akhil babu’s picture

Issue summary: View changes
StatusFileSize
new16.35 KB
akhil babu’s picture

Status: Needs work » Needs review

Updated the IS, Thanks

pameeela’s picture

Issue summary: View changes
Issue tags: -Needs tests, -Needs issue summary update
StatusFileSize
new43.08 KB

Gave this a manual test and it looks good. Updated one of the screenshots in the IS which was taken using Gin rather than Claro.

I think these two tags can now be removed too, I reviewed the IS and made some minor tweaks. This would be good to include as a highlight in whatever minor version it makes it into :)

akhil babu changed the visibility of the branch 1156338-fixed-maximum-number to hidden.

akhil babu changed the visibility of the branch 1156338-fixed-maximum-number to active.

prashant.c’s picture

StatusFileSize
new5.94 KB
new18.05 KB
new3.35 MB

This feature would be beneficial as currently, we are using the contributed modules like
https://www.drupal.org/project/sam or https://www.drupal.org/project/field_widget_add_more to achieve the same.

I am attaching the before and after screenshots of the manual review on the local Drupal 11 instance.

Before
After

However, I have a few points:

  1. Should not the "Show add more button" be enabled by default in the settings rather than explicitly enabling it?
  2. Now because the button is introduced to add the items the blank field should not be displayed by default without clicking the "Add another item" button. This blank appears on the edit node and not while adding. Try saving with say 2 values filled and save the node and then on the edit page you will see one more field displayed without clicking the "Add another item" button.
  3. On the "Manage form display" page in the widget settings the checkbox label is "Show add more button" but the label of the button is not "Add more" it is "Add another item", which might be confusing to some users.

Thanks!

pameeela’s picture

@prashant.c thanks for the review, but note there are already screenshots provided there is no need to add more.

Should not the "Show add more button" be enabled by default in the settings rather than explicitly enabling it?

I can see a case for both, as there are definitely situations where you might want the widgets to show. Don't feel strongly either way.

On the "Manage form display" page in the widget settings the checkbox label is "Show add more button" but the label of the button is not "Add more" it is "Add another item", which might be confusing to some users.

I agree the wording could be more clear, but I don't think that saying "Show 'Add another item' button" is the solution because that still isn't that clear. "Simple Add More" module does the opposite of what's in place here: it makes the behaviour the default but offers a setting to show all elements with the wording:

Skip "Simple Add More" simplification (i.e. show all elements, even if empty).

So I think we can also describe better what the setting does, but I'm struggling with something that is both clear and concise: "Show button to add more values instead of maximum empty fields" (too long) / "Show button to add more values" (short but not as obvious) / "Show maximum allowed values even if empty" (not that clear?)

Now because the button is introduced to add the items the blank field should not be displayed by default without clicking the "Add another item" button.

This is a separate issue - #2980806: Fields with unlimited cardinality show 1 extra input field

prashant.c’s picture

Thank you @pameeela for the detailed response. I was not aware of this #2980806: Fields with unlimited cardinality show 1 extra input field.

pameeela’s picture

After thinking more about this I am leaning toward having it be opt out rather than opt in, because I think it would be more common to want it that not. The reasons to not want it IMO would be if the cardinality is 2 or maybe 3, then I think it probably makes sense to just show the widgets. But in those cases, I don't think it's a problem to have it enabled, and folks could opt out.

The only other consideration is this is a change from the current behaviour that might be unexpected, but I am not sure that is a good reason to have it be opt in.

el7cosmos’s picture

If we want this by default, do we need to update the existing field config?

It may also make more sense to have "Show all items"/"Show all widgets" instead.

pameeela’s picture

I don't think we would want to update existing config, changing the behaviour after the fact would be pretty confusing. I think it only should be enabled by default for new config.

So yeah in that case, I think the boolean is off by default, and we can say "Show empty widgets instead of 'Add another item' button" (or something, feedback welcome) for the label. Ideally the label will make it clear what the setting does without being overly long.

But let's wait a bit and see if there is any other input before making changes.

prashant.c’s picture

I do not think "Show all items"/"Show all widgets" will make sense because we are not showing all the items at one go, we are providing a way to add another/more item (which is one at a time). So in my opinion "Add another item" is concise and clear to every type of user (technical/non-technical).

Regarding the default enabling option, we may wait for feedback. :)

smustgrave’s picture

Status: Needs review » Needs work

Will need some kind of update path for existing sites. If the setting is unchecked add_more: false should be in the config currently it's empty.

ramprassad made their first commit to this issue’s fork.

ramprassad’s picture

@smustgrave I have created a new MR (10400) with an update hook in file.install which updates the add_more:false in the form display config for the applicable bundles where these multivalued fields are available. This includes the changes in the previous MR.
My opinion would be to have add_more:true, to have this feature enabled by default to give a good user experience to content authors. Please review and suggest.

smustgrave’s picture

Please add to an existing MR vs starting a new when the current is pointing to the correct brandh

ramprassad changed the visibility of the branch 1156338-fixed-maximum-number-1 to hidden.

ramprassad’s picture

@smustgrave I have updated the existing MR and closed the other one. Please check

ramprassad’s picture

Status: Needs work » Needs review
ramprassad’s picture

sagarmohite0031’s picture

StatusFileSize
new54.69 KB
new29.23 KB

Hello,
Tested and verified on Drupal 11,
MR applied successfully
Attaching before and after screenshot

ramprassad’s picture

Assigned: Unassigned » ramprassad
ramprassad’s picture

Assigned: ramprassad » Unassigned
saurav-drupal-dev’s picture

StatusFileSize
new42.07 KB

The issue is still not fixed for me i had to manually check the 'Show add more button' then the add more button is appearing.

not fixed

ramprassad’s picture

@saurav-drupal-dev Yes this is how its supposed to be for now. By default "Show add more" button will not be checked and we are waiting on the community's decision(pls see #56 to #60). If it has to be enabled, I can update the config as well.

smustgrave’s picture

Status: Needs review » Needs work

Left comments on MR.

ramprassad’s picture

@smustgrave, I have addressed the comments on the MR, please check.

ramprassad’s picture

Assigned: Unassigned » ramprassad
ramprassad’s picture

Assigned: ramprassad » Unassigned
Status: Needs work » Needs review
smustgrave’s picture

Status: Needs review » Needs work
harivansh’s picture

Assigned: Unassigned » harivansh
harivansh’s picture

Assigned: harivansh » Unassigned
Status: Needs work » Needs review
smustgrave’s picture

Status: Needs review » Needs work

Left a comment on the MR thanks.

harivansh’s picture

Assigned: Unassigned » harivansh
shaxa’s picture

The current MR is not mergeable in any other version prior to 11.3.x.

Maybe good idea to have a patch version for 11.1.x, 11.2.x.

shaxa’s picture

StatusFileSize
new21.8 KB

Here is a patch that works for me for 11.2.10

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.

harivansh’s picture

Assigned: harivansh » Unassigned
sibustephen’s picture

StatusFileSize
new2.75 KB

The patch 1156338-add-more-ui.patch implements improved UX for limited cardinality fields. Shows only one widget initially, adds "Add another item” button and respects max cardinality. Tested and working.