Adapting form component - 'action' trait input doesn't update when trait is set programatically

[benryanwilliams]

I've taken the form component from grapesjs-plugin-forms and adapted it to include a button for generating the form action url from data stored on the backend, and the action value in the trait and the html both update correctly, but the input inside the editor doesn't update. I've tried the following as per #161 (comment) and neither of them work:

1. editor.TraitManager.getTraitsViewer().render()
2. editor.trigger('change:selectedComponent')

I've also tried editor.trigger('component:toggled') but to no avail.

Here's the relevant code:

Form component:

domc.addType(typeForm, {
    isComponent: (el) => el.tagName == "FORM",

    model: {
      defaults: {
        tagName: "form",
        droppable: ":not(form)",
        draggable: ":not(form)",
        attributes: { method: "get" },
        traits: [
          {
            type: "select",
            name: "method",
            options: [
              { value: "get", name: "GET" },
              { value: "post", name: "POST" },
            ],
          },
          {
            name: "action",
          },
          {
            type: 'button',
            text: 'Get action from flow',
            full: true,
            command: 'open-add-flow-to-form-action',
          
          }
        ],
      },
    },

    view: {
      events: {
        submit: (e) => e.preventDefault(),
      },
    },
  })

Method triggered upon selecting the source of the url

addLinkToFormAction(link) {
  this.showAddFlowToFormActionDialog = false
  const component = editor.getSelected()
  component.getTrait('action').set('value', link)
  editor.trigger('component:toggled');  // This doesn't work
  editor.TraitManager.getTraitsViewer().render() //  // This doesn't work
},

It doesn't even change when selecting another component then selecting the form again. Here's a video showing all of the above:

Screen.Recording.2022-11-25.at.13.19.01-1.mov

Interestingly, the input shows the correct value when the browser is reloaded. Any ideas?

[artf]

Traits read data directly from the component, so all you have to do is to update your component

editor.getSelected().addAttributes({ action: 'new action' })

[benryanwilliams]

So simple! Thanks so much for all your help @artf