`DrupalToggle` for `boolean_checkbox` widget is always toggled "on", even when `checked` attribute is absent

The issue is with the API that when a node is updated, the updated content is not reflected in the API response. Instead, the API continues to return the old data. This problem occurs because the following code retrieves data from the auto-save manager, which may not have the latest changes:

if ($body = $this->autoSaveManager->getAutoSaveData($entity)) {
    ['layout' => $layout, 'model' => $model, 'entity_form_fields' => $entity_form_fields] = $body;
}

Debugged this.

#5 is inaccurate AFAICT.

Debugging trail

1. Create a fresh node with status: false. Say, node 4.
2. Load it in Experience Builder at /xb/node/4/editor. Observe that the Published toggle is toggled on.
3. Put a breakpoint in the code that generates this form: \Drupal\experience_builder\Controller\EntityFormController::form(). Observe this is the return value:
   
   Most importantly: #value === FALSE.
4. In \Drupal\Core\Render\Element\Checkbox::preRenderCheckbox(), that's still the case.
5. ⚠️ However, that maps the #return_value Form API property to the value attribute:
   

   Element::setAttributes($element, ['id', 'name', '#return_value' => 'value']);
   

   which results in
   

6. Look at the corresponding FE code: /ui/src/components/form/components/drupal/DrupalToggle.tsx. It contains this:
   

     <Toggle
       checked={!!attributes?.value}
   

   … which appears accurate but isn't. The value attribute for <input type="checkbox"> is very interesting 🤪, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox....

   So AFAICT the problem lies in DrupalToggle, which was introduced in #3491265: Split form components into `Drupal`-prefixed behavioral wrappers and presentational components.

Looking at /node/<nid>/edit

• checked "published" checkbox: <input data-drupal-selector="edit-status-value" type="checkbox" id="edit-status-value" name="status[value]" value="1" class="form-checkbox form-boolean form-boolean--type-checkbox">
• unchecked "published" checkbox:
  

  <input data-drupal-selector="edit-status-value" type="checkbox" id="edit-status-value" name="status[value]" value="1" checked="checked" class="form-checkbox form-boolean form-boolean--type-checkbox">
  

👆 That's the markup being generated outside of XB. That's the starting point for things we do on top.

Tentative conclusion: needs only front-end changes?

So AFAICT updating DrupalToggle should work? But

-    checked={!!attributes?.value}
+    checked={!!attributes?.checked}

didn't do the trick 😅

I'm getting lost between:

1. ui/src/components/form/components/Checkbox.tsx
2. ui/src/components/form/components/drupal/DrupalInput.tsx
3. ui/src/components/form/components/Toggle.tsx
4. ui/src/components/form/components/drupal/DrupalToggle.tsx

… because all four of those (!!!) are dealing with the checked attribute 😅 AFAICT only the last 2 are relevant. I changed both like indicated above, without success.

I've done the due diligence, and think it's now down to somebody who knows the Semi-Coupled theme engine well enough to finish it up. It probably takes them only minutes given the digging I've done so far 🤞

-    checked={!!attributes?.value}
+    checked={!!attributes?.checked}

That should be the way, as the correct attribute to check should be checked and not value

However, the other issue seems to be that the attributes.checked is coming as true always.

I am guessing somewhere in the flow that the value parameter of 1 is getting associated with the checked HTML attribute as true.

Needs further digging.

I made an update to the DrupalToggle component in #3500017: Defining props for code components, then @jessebaker pointed me at this issue.

Can someone, please, help me with steps to reproduce? We have solid investigation bits by Wim in #10, but I'm having a hard time to see how to actually reproduce the problem — unless it went away. (At the time of writing this comment, #3500017: Defining props for code components is not in, but I don't think that will fix this anyway.)

@balintbrews Added steps to the IS 😊

Adding a gif

Added STR for using article nodes.

I have made some changes in ui/src/components/form/components/inputBehaviors.tsx, which have resolved the checkbox issue. The autosave state is now updating correctly. However, still facing a problem when moving a node from published to draft.

Thanks, merged!