fix(forms): proper property and attribute reflection for button mixin

- Changed `HTMLElement` to `Element` for `commandForElement`, `interestForElement`, and `popoverTargetElement` in various controllers and mixins to enhance type flexibility.
- Added new tests to verify behavior when `popovertarget` changes in `InterestInvokerController`.
- Updated tests in `PopoverTriggerController` and `ButtonFormControlMixin` to reflect changes in element type handling.
Signed-off-by: Cory Rylan <crylan@nvidia.com>

Author: coryrylan

…ternal/button-form-control-usage.test.ts …/forms/button-form-control-usage.test.tsprojects/core/src/internal/button-form-control-usage.test.ts renamed to projects/core/src/forms/button-form-control-usage.test.ts projects/core/src/internal/button-form-control-usage.test.ts renamed to projects/core/src/forms/button-form-control-usage.test.ts

@@ -99,7 +99,7 @@ describe('ButtonFormControlMixin core usage', () => {
 expect(button.tabIndex).toBe(-1);
 
 button.disabled=false;
-button.readonly=true;
+button.readOnly=true;
 awaitelementIsStable(button);
 expect(button.readOnly).toBe(true);
 expect(button.hasAttribute('readonly')).toBe(true);

projects/forms/src/internal/controllers/type-interest-invoker.controller.test.ts

@@ -159,6 +159,55 @@ describe('InterestInvokerController', () => {
 expect(element.interestForElement).toBe(target);
 });
 
+it('should re-resolve inferred targets when popovertarget changes',async()=>{
+fixture=awaitcreateFixture(html`
+<interest-invoker-controller-test-elementpopovertarget="first"></interest-invoker-controller-test-element>
+<divid="first" popover="hint"></div>
+<divid="second" popover="hint"></div>
+ `);
+constelement=fixture.querySelector<InterestInvokerControllerTestElement>(
+'interest-invoker-controller-test-element'
+)!;
+constfirst=fixture.querySelector<HTMLElement>('#first')!;
+constsecond=fixture.querySelector<HTMLElement>('#second')!;
+constfirstDispatch=vi.spyOn(first,'dispatchEvent');
+constsecondDispatch=vi.spyOn(second,'dispatchEvent');
+
+element.dispatchEvent(newMouseEvent('mouseenter'));
+element.setAttribute('popovertarget','second');
+element.dispatchEvent(newMouseEvent('mouseenter'));
+element.dispatchEvent(newMouseEvent('mouseleave'));
+
+expect(firstDispatch.mock.calls.map(([event])=>event.type)).toEqual(['interest']);
+expect(secondDispatch.mock.calls.map(([event])=>event.type)).toEqual(['interest','loseinterest']);
+expect(element.interestForElement).toBe(second);
+});
+
+it('should preserve explicitly assigned interest targets when popovertarget changes',async()=>{
+fixture=awaitcreateFixture(html`
+<interest-invoker-controller-test-elementpopovertarget="first"></interest-invoker-controller-test-element>
+<divid="first" popover="hint"></div>
+<divid="second" popover="hint"></div>
+<divid="explicit"></div>
+ `);
+constelement=fixture.querySelector<InterestInvokerControllerTestElement>(
+'interest-invoker-controller-test-element'
+)!;
+constfirst=fixture.querySelector<HTMLElement>('#first')!;
+constexplicit=fixture.querySelector<HTMLElement>('#explicit')!;
+
+element.dispatchEvent(newMouseEvent('mouseenter'));
+expect(element.interestForElement).toBe(first);
+
+constexplicitInterest=untilEvent<InterestTestEvent>(explicit,'interest');
+element.interestForElement=explicit;
+element.setAttribute('popovertarget','second');
+element.dispatchEvent(newMouseEvent('mouseenter'));
+
+expect((awaitexplicitInterest).source).toBe(element);
+expect(element.interestForElement).toBe(explicit);
+});
+
 it('should no-op for missing targets and after disconnect',async()=>{
 fixture=awaitcreateFixture(
 html`<interest-invoker-controller-test-elementinterestfor="missing"></interest-invoker-controller-test-element>`

projects/forms/src/internal/controllers/type-interest-invoker.controller.ts

@@ -12,6 +12,8 @@ type InterestInvokerHost = ReactiveElement & {
 };
 
 exportclassTypeInterestInvokerController<TextendsInterestInvokerHost>implementsReactiveController{
+ #inferredInterestForElement: HTMLElement|null=null;
+
 constructor(privatehost: T){
 this.host.addController(this);
 }
@@ -39,36 +41,66 @@ export class TypeInterestInvokerController<T extends InterestInvokerHost> implem
 return;
 }
 
-this.#updateInterestForElement();
-if(this.host.interestForElement){
-constinterest=newEvent('interest',{cancelable: true})asInterestEvent;
-interest.source=this.host;
-this.host.interestForElement.dispatchEvent(interest);
-}
+this.#dispatchInterestEvent('interest');
 };
 
- #onLoseInterest =()=>{
-this.#updateInterestForElement();
-if(this.host.interestForElement){
-constevent=newEvent('loseinterest',{cancelable: true})asInterestEvent;
-event.source=this.host;
-this.host.interestForElement.dispatchEvent(event);
+ #onLoseInterest =()=>this.#dispatchInterestEvent('loseinterest');
+
+#dispatchInterestEvent(type: 'interest'|'loseinterest'){
+consttarget=this.#getInterestForElement();
+if(!target){
+return;
 }
-};
 
- #updateInterestForElement(){
+constevent=newEvent(type,{cancelable: true})asInterestEvent;
+event.source=this.host;
+target.dispatchEvent(event);
+}
+
+ #getInterestForElement(){
+constexplicitTarget=this.#getExplicitInterestForElement();
+if(explicitTarget!==undefined){
+returnexplicitTarget;
+}
+
+constinferredTarget=this.#getHintPopoverTarget();
+constpreviousTarget=this.#inferredInterestForElement;
+this.#inferredInterestForElement =inferredTarget;
+if(inferredTarget&&this.host.interestForElement!==inferredTarget){
+this.host.interestForElement=inferredTarget;
+}elseif(!inferredTarget&&previousTarget&&this.host.interestForElement===previousTarget){
+this.host.interestForElement=null;
+}
+returninferredTarget;
+}
+
+ #getExplicitInterestForElement(): HTMLElement|null|undefined{
 constinterestForIdRef=this.host.getAttribute('interestfor');
-if(interestForIdRef&&!this.host.interestForElement){
-this.host.interestForElement=
-getFlattenedDOMTree(this.host.getRootNode()).find(element=>element.id===interestForIdRef)??null;
+if(interestForIdRef){
+this.#inferredInterestForElement =null;
+returnthis.#getElementById(interestForIdRef);
 }
 
-constpopoverTargetIdRef=this.host.getAttribute('popovertarget');
-if(popoverTargetIdRef&&!interestForIdRef){
-consttarget=getFlattenedDOMTree(this.host.getRootNode()).find(element=>element.id===popoverTargetIdRef);
-if(target&&target.popover==='hint'){
-this.host.interestForElement=target;
-}
+constinterestForElement=this.host.interestForElement;
+if(!interestForElement||interestForElement===this.#inferredInterestForElement){
+returnundefined;
 }
+
+this.#inferredInterestForElement =null;
+returninterestForElement;
+}
+
+ #getHintPopoverTarget(){
+constpopoverTarget=this.host.popoverTargetElement;
+if(popoverTargetinstanceofHTMLElement&&popoverTarget.popover==='hint'){
+returnpopoverTarget;
+}
+
+consttarget=this.#getElementById(this.host.getAttribute('popovertarget'));
+returntargetinstanceofHTMLElement&&target.popover==='hint' ? target : null;
+}
+
+ #getElementById(id: string|null){
+returnid ? (getFlattenedDOMTree(this.host.getRootNode()).find(element=>element.id===id)??null) : null;
 }
 }

projects/forms/src/internal/controllers/type-popover-trigger.controller.test.ts

@@ -14,7 +14,6 @@ class PopoverTriggerControllerTestElement extends HTMLElement {
 interestForElement: HTMLElement|null=null;
 popoverTargetAction?: PopoverTargetAction;
 popoverTargetElement: HTMLElement|null=null;
-popovertarget?: string;
  #controllers =newSet<ReactiveController>();
 
 constructor(){
@@ -58,7 +57,7 @@ describe('PopoverTriggerController', () => {
 constpopover=fixture.querySelector<HTMLElement>('[popover]')!;
 consttogglePopover=vi.spyOn(popover,'togglePopover').mockImplementation(()=>false);
 
-element.popovertarget='popover';
+element.setAttribute('popovertarget','popover');
 awaitemulateClick(element);
 
 expect(element.popoverTargetElement).toBe(popover);
@@ -101,12 +100,12 @@ describe('PopoverTriggerController', () => {
 
 element.interestForElement=tooltip;
 element.popoverTargetAction='show';
-element.popovertarget='first';
+element.setAttribute('popovertarget','first');
 awaitemulateClick(element);
 first.hidePopover();
 
 loseInterest.mockClear();
-element.popovertarget='second';
+element.setAttribute('popovertarget','second');
 awaitemulateClick(element);
 
 expect(element.popoverTargetElement).toBe(second);
@@ -249,7 +248,7 @@ describe('PopoverTriggerController', () => {
 
 Object.defineProperty(popover,'anchor',{configurable: true,value: 'anchor'});
 element.interestForElement=tooltip;
-element.popovertarget='popover';
+element.setAttribute('popovertarget','popover');
 awaitemulateClick(element);
 
 expect(element.popoverTargetElement).toBe(popover);

projects/forms/src/internal/controllers/type-popover-trigger.controller.ts

@@ -13,7 +13,6 @@ type PopoverTriggerHost = ReactiveElement & {
 interestForElement: HTMLElement|null;
 popoverTargetAction?: PopoverTargetAction;
 popoverTargetElement: HTMLElement|null;
-popovertarget?: string;
 };
 
 exportclassTypePopoverTriggerController<TextendsPopoverTriggerHost>implementsReactiveController{
@@ -35,7 +34,7 @@ export class TypePopoverTriggerController<T extends PopoverTriggerHost> implemen
 constpopoverTargetElement=this.host.popoverTargetElement;
 constcontrollerResolvedTarget=popoverTargetElement===this.#resolvedPopoverTarget;
 
-if(!this.host.popovertarget){
+if(!this.host.getAttribute('popovertarget')){
 this.#resolvedPopoverTarget =undefined;
 if(controllerResolvedTarget){
 this.host.popoverTargetElement=null;
@@ -50,7 +49,9 @@ export class TypePopoverTriggerController<T extends PopoverTriggerHost> implemen
 }
 
 constresolvedPopoverTarget=
-getFlattenedDOMTree(this.host.getRootNode()).find(element=>element.id===this.host.popovertarget)??null;
+getFlattenedDOMTree(this.host.getRootNode()).find(
+element=>element.id===this.host.getAttribute('popovertarget')
+)??null;
 if(resolvedPopoverTarget!==popoverTargetElement){
 this.host.popoverTargetElement=resolvedPopoverTarget;
 }

projects/forms/src/mixins/button.test.ts

@@ -552,24 +552,15 @@ describe('ButtonFormControlMixin', () => {
 
 it('should sync removable string attributes',async()=>{
 submitButton.value='saved';
-submitButton.popovertarget='popover';
-submitButton.commandfor='command-target';
 submitButton.command='--test';
-submitButton.interestfor='interest-target';
 awaitelementIsStable(submitButton);
 
 submitButton.removeAttribute('value');
-submitButton.removeAttribute('popovertarget');
-submitButton.removeAttribute('commandfor');
 submitButton.removeAttribute('command');
-submitButton.removeAttribute('interestfor');
 awaitelementIsStable(submitButton);
 
 expect(submitButton.value).toBeUndefined();
-expect(submitButton.popovertarget).toBeUndefined();
-expect(submitButton.commandfor).toBe(null);
 expect(submitButton.command).toBeUndefined();
-expect(submitButton.interestfor).toBe(null);
 });
 });
 
@@ -751,6 +742,69 @@ describe('ButtonFormControlMixin', () => {
 expect((propertyCommand.mock.calls[0]?.[0]asCommandTestEvent).source).toBe(button);
 });
 
+it('should reflect native target properties to their corresponding attributes',async()=>{
+fixture=awaitcreateFixture(html`
+<button-form-control-mixin-test-element
+commandfor="attribute-command"
+interestfor="attribute-interest"
+popovertarget="attribute-popover"
+popovertargetaction="show"
+></button-form-control-mixin-test-element>
+<divid="attribute-command"></div>
+<divid="attribute-interest"></div>
+<divid="attribute-popover" popover></div>
+<divid="property-command"></div>
+<divid="property-interest"></div>
+<divid="property-popover" popover></div>
+ `);
+button=fixture.querySelector<ButtonFormControlMixinTestElement>('button-form-control-mixin-test-element')!;
+constattributeCommand=fixture.querySelector<HTMLElement>('#attribute-command')!;
+constattributeInterest=fixture.querySelector<HTMLElement>('#attribute-interest')!;
+constattributePopover=fixture.querySelector<HTMLElement>('#attribute-popover')!;
+constpropertyCommand=fixture.querySelector<HTMLElement>('#property-command')!;
+constpropertyInterest=fixture.querySelector<HTMLElement>('#property-interest')!;
+constpropertyPopover=fixture.querySelector<HTMLElement>('#property-popover')!;
+awaitelementIsStable(button);
+
+expect(button.commandForElement).toBe(attributeCommand);
+expect(button.interestForElement).toBe(attributeInterest);
+expect(button.popoverTargetElement).toBe(attributePopover);
+expect(button.popoverTargetAction).toBe('show');
+
+button.commandForElement=propertyCommand;
+button.interestForElement=propertyInterest;
+button.popoverTargetElement=propertyPopover;
+button.popoverTargetAction='hide';
+awaitelementIsStable(button);
+
+expect(button.getAttribute('commandfor')).toBe('');
+expect(button.getAttribute('interestfor')).toBe('');
+expect(button.getAttribute('popovertarget')).toBe('');
+expect(button.getAttribute('popovertargetaction')).toBe('hide');
+expect(button.commandForElement).toBe(propertyCommand);
+expect(button.interestForElement).toBe(propertyInterest);
+expect(button.popoverTargetElement).toBe(propertyPopover);
+
+button.setAttribute('commandfor','attribute-command');
+button.setAttribute('interestfor','attribute-interest');
+button.setAttribute('popovertarget','attribute-popover');
+button.setAttribute('popovertargetaction','invalid');
+awaitelementIsStable(button);
+
+expect(button.commandForElement).toBe(attributeCommand);
+expect(button.interestForElement).toBe(attributeInterest);
+expect(button.popoverTargetElement).toBe(attributePopover);
+expect(button.popoverTargetAction).toBe('toggle');
+
+button.commandForElement=null;
+button.interestForElement=null;
+button.popoverTargetElement=null;
+
+expect(button.hasAttribute('commandfor')).toBe(false);
+expect(button.hasAttribute('interestfor')).toBe(false);
+expect(button.hasAttribute('popovertarget')).toBe(false);
+});
+
 it('should no-op command dispatch when clicks are default-prevented, disabled, readonly, or commandless',async()=>{
 fixture=awaitcreateFixture(html`
 <button-form-control-mixin-test-elementcommand="--test" commandfor="target"></button-form-control-mixin-test-element>
@@ -860,7 +914,7 @@ describe('ButtonFormControlMixin', () => {
 emulateClick(button);
 first.hidePopover();
 
-button.popovertarget='second';
+button.setAttribute('popovertarget','second');
 awaitelementIsStable(button);
 emulateClick(button);