Problem/Motivation

The form button like the default "Submit" button of any
webform, is not accepting
any #states conditions once the dialog is initialized.

The problem is in getting the default state of the button to initialize in the
dialog. Because once you start entering input values the button's state is
updated.

The issue is Drupal.behaviors.dialog.prepareDialogButtons in
core/misc/dialog/dialog.ajax.es6.js clones the primary buttons
without copying the #states conditions.

This must be a core States API issue.

Steps to reproduce

  1. Install the webform module.
  2. Using the built-in "contact" form, create a condition to hide the
    "Send message" button.
    • "Hidden" if "Your Name" textfield value is "Hide Button".

    The yaml #state condition will be something like:

    '#states':
      invisible:
        ':input[name="name"]':
          value: 'Hide Button'
  3. Add the "contact" form as a field of type "webform" to the article content
    type.
  4. Create one test article, lets consider the article nid is "12".
  5. Launch the created article in a dialog/popup using the below code:
    <a class="use-ajax" data-dialog-type="modal" href="/node/12">
    Open article
    </a>
  6. Find the webform field and try to input inside the "your name" field the text:
    Hide Button.
  7. You will notice that the "Send message" button is still visible without any
    changes for its #states.

Proposed resolution

The issue is Drupal.behaviors.dialog.prepareDialogButtons in
core/misc/dialog/dialog.ajax.es6.js clones the primary buttons
without copying the #states conditions.

This must be a core States API issue.

Remaining tasks

N/A

User interface changes

N/A

Introduced terminology

N/A

API changes

N/A

Data model changes

N/A

Release notes snippet

N/A

Reference
The discussion of the webform issue
here,
lead to create this core issue.

Below is the source code of a configured "contact" form to speed up the
reproducing of the issue:

name:
  '#type': textfield
  '#title': 'Your Name'
  '#required': true
  '#default_value': '[current-user:account-name]'
  '#multiple__no_items_message': '<p>No items entered. Please add items below.</p>'

email:
  '#title': 'Your Email'
  '#type': email
  '#required': true
  '#default_value': '[current-user:mail]'

subject:
  '#type': textfield
  '#title': Subject
  '#required': true
  '#states':
    visible:
      ':input[name="name"]':
        value: Webform
  '#multiple__no_items_message': '<p>No items entered. Please add items below.</p>'
  '#test': 'Testing contact webform from [site:name]'

message:
  '#title': Message
  '#type': textarea
  '#required': true
  '#test': 'Please ignore this email.'

actions:
  '#type': webform_actions
  '#title': 'Submit button(s)'
  '#states':
    invisible:
      ':input[name="name"]':
        value: 'Hide Button'
  '#states_clear': false
  '#submit__label': 'Send message'

Issue fork drupal-3008172

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

C.E.A created an issue. See original summary.

Drutech’s picture

Priority: Normal » Major
c.e.a’s picture

any update concerning this issue ?!

c.e.a’s picture

This is a really complex #states API issue which needs to be solved by Drupal core...

Anyone with enough knowledge can step forward to solve this issue ?!

thank you,

c.e.a’s picture

Version: 8.6.x-dev » 8.6.4
Component: forms system » ajax system
c.e.a’s picture

Any update on this core issue ?

c.e.a’s picture

Version: 8.6.4 » 8.6.14
vflirt’s picture

Here is a patch. I think this is about any form put in dialog not just webforms so this is really Major.

vflirt’s picture

Status: Active » Needs review
alonaoneill’s picture

Status: Needs review » Needs work
Issue tags: +Needs reroll
vflirt’s picture

Version: 8.6.14 » 8.8.x-dev
Assigned: Unassigned » vflirt

The patch applied clean to latest 8.8.x-dev

vflirt’s picture

@alonaoneill could please describe why it needs reroll and what you are looking for.

vacho’s picture

Issue tags: -Needs reroll

The patch applies fine over 8.8.x.

alonaoneill’s picture

Sorry, my mistake. Didn't apply for me first time, but then did!

yogeshmpawar’s picture

Assigned: vflirt » Unassigned
Status: Needs work » Needs review

Setting back to Needs Review as per above comments.

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.

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.

c.e.a’s picture

Applied patch #8 on Drupal 8.8.5 as below:

user@example.com [~/public_html/example.com/web]# patch -p1 < submit-button-states-in-dialog-3008172.patch
patching file core/misc/dialog/dialog.ajax.es6.js
Hunk #1 succeeded at 69 (offset -12 lines).
Hunk #2 succeeded at 89 (offset -12 lines).
Hunk #3 succeeded at 144 (offset -12 lines).
patching file core/misc/dialog/dialog.ajax.js
Hunk #1 succeeded at 42 (offset -7 lines).
Hunk #2 succeeded at 54 (offset -7 lines).
Hunk #3 succeeded at 87 (offset -7 lines).
user@example.com [~/public_html/example.com/web]# drush cr
 [success] Cache rebuild complete.

and still the button no following any condition (Hidden, Disabled...)

k.skarlatos’s picture

Not working (Drupal 8.9.2)

anu.a_95’s picture

Status: Needs review » Needs work
Issue tags: +Drupal 9 compatibility
Vidushi Mehta’s picture

Status: Needs work » Needs review
StatusFileSize
new3.38 KB

Added a patch for 9.1.x

snehalgaikwad’s picture

StatusFileSize
new96.6 KB

Tested patch #21 on 9.1.x but issue is still there. Button is not getting hidden on condition. Attaching screenshot of modal after applying patch.

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.

tanubansal’s picture

Tested #21, I am also facing the same issue mentioned in #22
Please check

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.

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.

menwithbeards’s picture

hi all, are there any hopes of sorting this issue out? I would look into it myself, but I'm afraid this #states stuff is still a bit out of my league at the moment :/

nathan tsai’s picture

Work around with drupalAutoButton = FALSE.

Need this patch, though: https://www.drupal.org/project/drupal/issues/2793343

ranjith_kumar_k_u’s picture

StatusFileSize
new3.42 KB

Re-rolled #21 for 9.4.

yogeshmpawar’s picture

StatusFileSize
new3.72 KB
new301 bytes

Updated patch will resolves CSpell errors.

priyanka.sahni’s picture

Verified the issue by applying the patch, patch was successfully applied.

Steps to Reproduce -
1. Go to the terminal -> Apply the patch
2. Install the webform.
3. Copy the git link using below link.
https://www.drupal.org/project/webform/git-instructions
4. Copy the webform module in the modules folder under Drupal.
5. Go to the site.
6. Go to /admin/modules
7. Enable the web forms and webform UI.
8. Go to /admin/structure/webform/manage/contact/source
9. Paste the below code
name:
'#type': textfield
'#title': 'Your Name'
'#placeholder': 'Hide Button'
'#required': true
'#states':
invisible:
':input[name="name"]':
value: 'Hide Button'
'#default_value': '[current-user:display-name]'
email:
'#title': 'Your Email'
'#type': email
'#required': true
'#default_value': '[current-user:mail]'
subject:
'#title': Subject
'#type': textfield
'#required': true
'#test': 'Testing contact webform from [site:name]'
message:
'#title': Message
'#type': textarea
'#required': true
'#test': 'Please ignore this email.'
actions:
'#type': webform_actions
'#title': 'Submit button(s)'
'#submit_hide': true
'#submit__label': 'Send message'
10. Go to /admin/structure/webform/manage/contact
11. Mark the Your Name as hidden
12. Go to /admin/structure/types/manage/article/fields/node.article.field_test_menu
13. Create the article
14. In the body field, Enter the text as "

Open article

"
15. Save the article.
16. Copy the node link.
17. Open in incognito window.
18. Verify.

Before Patch -
Only local images are allowed.

After Patch -
Only local images are allowed.

priyanka.sahni’s picture

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.

rinku jacob 13’s picture

StatusFileSize
new3.71 KB

Re-rolled patch#30 for 9.5.x. Thanks @yogeshmpawar

sonam.chaturvedi’s picture

Status: Needs review » Needs work
StatusFileSize
new68.2 KB

Applied patch #34 on 9.5.x-dev.

Test Result:
Patch applied successfully but issue is not resolved. 'Send Message' Button is not getting hidden on condition when webform is launched in modal pop-up.

Attaching screenshot of modal after applying patch
after patch

Moving to Need Work

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.

hchonov’s picture

StatusFileSize
new3.86 KB

Re-roll for core 9.5.1.

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.

hchonov’s picture

Status: Needs work » Needs review
StatusFileSize
new1.93 KB

Re-roll for 10.1.x

gauravvvv’s picture

StatusFileSize
new1.98 KB

I have fixed the failures also attached interdiff for same. please review

gauravvvv’s picture

StatusFileSize
new1.63 KB
smustgrave’s picture

Status: Needs review » Needs work
Issue tags: +Needs issue summary update, +Needs tests

The IS appears to be missing the proposed solution.

Also should add a test case showing the issue.

huzooka’s picture

StatusFileSize
new2.03 KB

Sharing my very naive alternative patch (on top of 10.2.x), maybe this can help some of you.

claudiu.cristea made their first commit to this issue’s fork.

claudiu.cristea’s picture

Any chance for a Drupal 11 MR?

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

saidatom’s picture

Status: Needs work » Needs review

The previous implementation triggered dialogButtonsChange events on every form element state change (disabled, readonly, required, visible, checked, collapsed), causing dialog buttons to be recreated too frequently. This created a race condition where tests tried to interact with buttons while they were being recreated, resulting in "element not interactable" errors.

Changes:
- Updated dialog.ajax.js to use button.disabled property instead of getAttribute('disabled') to return proper boolean values for jQuery UI
- Modified states.js to only trigger dialogButtonsChange when submit buttons themselves change state (disabled or visible), not for every form element
- Other state handlers (readonly, required, checked, collapsed) don't trigger button updates as they don't apply to submit buttons

smustgrave’s picture

Status: Needs review » Needs work
Issue tags: -Drupal 9 compatibility

Thanks for picking up!

Can the summary be updated to use the standard template
Was previously tagged for tests which will still be needed

saidatom’s picture

Issue summary: View changes
saidatom’s picture

Status: Needs work » Needs review
alorenc’s picture

Assigned: Unassigned » alorenc
alorenc’s picture

It does not work for me

It is fine when the web form is visited directly.
However, when it is opened as a modal, the button is not hidden.

alorenc’s picture

Assigned: alorenc » Unassigned
Status: Needs review » Needs work
saidatom’s picture

Status: Needs work » Needs review

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.

smustgrave’s picture

Status: Needs review » Needs work

Sorry this one needs a rebase please.

Leaving IS update tag as the proposed solution is talking about fixing an es6 file which we know isn't the case