Created Custom Block - When I come back to edit post/page and change my block content - Update button stays disabled

Question

First time diving in to custom blocks - so I've managed to create a block, pretty simple just using RichText and attributes. Everything works fine when I initially add the block, I can change the content - then update, change, click update etc. Everything works as expected.

But if I update, close the editor and then come back to "edit" the page, the block loads up - I then select the RichText field, type a change and the Update button on the editor stays disabled.

The only way I can get the update button to work, is to add a paragraph then remove it, or change the title of the page, or do anything else to the page.

On update for the RichText field is simple, setAttribute.

But I'm lost as to what to do to make the Editor see that there are changes and to let me save them.

Edited to show example of RichText and the update function.

  attributes: {
    updated: {
      type: 'boolean',
      default: 0,
    },
    tabsTitles: {
      type: "array",
      source: "query",
      selector: "li.tab-item",
      default: [
        { title: "Tab 1" },
        { title: "Tab 2" },
        { title: "Tab 3"},
      ],
      query: {
        title: {
          type: "string",
          source: "html",
          selector: "a.tab-title",
        },
      },
    },
   }

<>

<div { ...blockProps }>
 <ul className="tab-list">
{attributes.tabsTitles.map( (data, i) => (
<li
 className = { state.selected === i ? 'tab-item active' : 'tab-item' }
>
<RichText
 key={i}
 tagName="a"
 href="#"
 className="tab-title"
 onChange={(value) => updateTabTitle(i, value)}
 onClick={ (e) => toggleTab(e, i) }
 allowedFormats={ [ 'core/bold', 'core/italic' ] }
 value={ data.title }
/>
</li>
) ) }
 </ul>
</div>
</>

update title function:

function updateTabTitle(i, value) {
  /** Make a copy before editing */
  const titles = attributes.tabsTitles;
  /** Do Change */
  titles[i].title = value;
  /** Set Att from copy */
  setAttributes({tabsTitles: titles});
  /** Tell silly WP we have changed an attr.. again */
  setAttributes({ updated: 1});
}

Answer 1

Added a new Boolean Attribute - called Updated.

call

setAttributes({ updated: 1 });

In any content editing update function.

Changing that attribute, makes the Update page button remove it's disabled tag, and can be clicked on and saves the changes.