Ensure a property is reflect to attribute when it is changed after an attribute change

src/lib/updating-element.ts

@@ -581,21 +581,25 @@ export abstract class UpdatingElement extends HTMLElement {
   requestUpdate(name?: PropertyKey, oldValue?: unknown) {
     let shouldRequestUpdate = true;
     // if we have a property key, perform property update steps.
-    if (name !== undefined && !this._changedProperties.has(name)) {
+    if (name !== undefined) {
       const ctor = this.constructor as typeof UpdatingElement;
       const options =
           ctor._classProperties!.get(name) || defaultPropertyDeclaration;
       if (ctor._valueHasChanged(
               this[name as keyof this], oldValue, options.hasChanged)) {
-        // track old value when changing.
-        this._changedProperties.set(name, oldValue);
+        if (!this._changedProperties.has(name)) {
+          // track old value when changing.
+          this._changedProperties.set(name, oldValue);
+        }
         // add to reflecting properties set
         if (options.reflect === true &&
             !(this._updateState & STATE_IS_REFLECTING_TO_PROPERTY)) {
           if (this._reflectingProperties === undefined) {
             this._reflectingProperties = new Map();
           }
           this._reflectingProperties.set(name, options);
+        } else if (this._reflectingProperties && this._reflectingProperties.has(name)) {
+          this._reflectingProperties.delete(name);
         }
         // abort the request if the property should not be considered changed.
       } else {

src/test/lib/updating-element_test.ts

@@ -729,7 +729,7 @@ suite('UpdatingElement', () => {
     assert.equal(el.getAttribute('custom'), '3');
     assert.equal(el.fromAttribute, 6);
     assert.equal(el.toAttribute, '7');
-    assert.equal(el.getAttribute('toattribute'), '7-attr');
+    assert.equal(el.getAttribute('toattribute'), '7');
     assert.equal(el.all, 11);
     assert.equal(el.getAttribute('all-attr'), '11-attr');
     assert.deepEqual(el.obj, {foo: true, bar: 5, baz: 'hi'});
@@ -2219,4 +2219,37 @@ suite('UpdatingElement', () => {
     await a.updateComplete;
     assert.equal(a.updatedCalledCount, 1);
   });
+
+  test('attribute change after a property change', async () => {
+    class E extends UpdatingElement {
+      static get properties() {
+        return {
+          disabled: {
+            type: Boolean,
+            reflect: true,
+            attribute: true
+          }
+        };
+      }
+      disabled = false;
+    }
+    const name = generateElementName();
+    customElements.define(name, E);
+    container.innerHTML = `<${name}></${name}>`;
+    const el = container.firstChild as E;
+    await el.updateComplete;
+    el.setAttribute('disabled', '');
+    el.removeAttribute('disabled');
+    el.disabled = true;
+    await el.updateComplete;
+    assert.isTrue(el.disabled);
+    assert.isTrue(el.hasAttribute('disabled'));
+    el.disabled = false;
+    await el.updateComplete;
+    el.setAttribute('disabled', '');
+    el.disabled = false;
+    await el.updateComplete;
+    assert.isFalse(el.disabled);
+    assert.isFalse(el.hasAttribute('disabled'));
+  });
 });