fix(field): make InteractionState leaveEvent protected

packages/field/src/InteractionStateMixin.js

@@ -73,7 +73,7 @@ export const InteractionStateMixin = dedupeMixin(
         this.touched = false;
         this.dirty = false;
         this.prefilled = false;
-        this.leaveEvent = 'blur';
+        this._leaveEvent = 'blur';
         this._valueChangedEvent = 'model-value-changed';
 
         this._iStateOnLeave = this._iStateOnLeave.bind(this);
@@ -87,7 +87,7 @@ export const InteractionStateMixin = dedupeMixin(
         if (super.connectedCallback) {
           super.connectedCallback();
         }
-        this.addEventListener(this.leaveEvent, this._iStateOnLeave);
+        this.addEventListener(this._leaveEvent, this._iStateOnLeave);
         this.addEventListener(this._valueChangedEvent, this._iStateOnValueChange);
         this.initInteractionState();
       }
@@ -96,7 +96,7 @@ export const InteractionStateMixin = dedupeMixin(
         if (super.disconnectedCallback) {
           super.disconnectedCallback();
         }
-        this.removeEventListener(this.leaveEvent, this._iStateOnLeave);
+        this.removeEventListener(this._leaveEvent, this._iStateOnLeave);
         this.removeEventListener(this._valueChangedEvent, this._iStateOnValueChange);
       }
 
@@ -159,5 +159,19 @@ export const InteractionStateMixin = dedupeMixin(
       _onDirtyChanged() {
         this.dispatchEvent(new CustomEvent('dirty-changed', { bubbles: true, composed: true }));
       }
+
+      /**
+       * @deprecated
+       */
+      get leaveEvent() {
+        return this._leaveEvent;
+      }
+
+      /**
+       * @deprecated
+       */
+      set leaveEvent(eventName) {
+        this._leaveEvent = eventName;
+      }
     },
 );

packages/field/test/InteractionStateMixin.test.js

@@ -164,4 +164,26 @@ describe('InteractionStateMixin', async () => {
     expect(el.touched).to.be.false;
     expect(el.prefilled).to.be.true;
   });
+
+  describe('SubClassers', () => {
+    it('can override the `_leaveEvent`', async () => {
+      const tagLeaveString = defineCE(
+        class IState extends InteractionStateMixin(LitElement) {
+          constructor() {
+            super();
+            this._leaveEvent = 'custom-blur';
+          }
+        },
+      );
+      const tagLeave = unsafeStatic(tagLeaveString);
+      const el = await fixture(html`<${tagLeave}></${tagLeave}>`);
+      el.dispatchEvent(new Event('custom-blur'));
+      expect(el.touched).to.be.true;
+    });
+
+    it('can override the deprecated `leaveEvent`', async () => {
+      const el = await fixture(html`<${tag} .leaveEvent=${'custom-blur'}></${tag}>`);
+      expect(el._leaveEvent).to.equal('custom-blur');
+    });
+  });
 });