Backport @triggerHtmlTag and add workaround to resolve button typing issue (#1033)

Author: mkszepp

docs/app/templates/public-pages.gts

@@ -74,13 +74,16 @@ export default class extends Component {
           >Github</a>
         </div>
         <div class="main-header-logo">
-          <BasicDropdown @calculatePosition={{this.calculatePosition}} as |dd|>
+          <BasicDropdown
+            @triggerHtmlTag="span"
+            @calculatePosition={{this.calculatePosition}}
+            as |dd|
+          >
             <LinkTo @route="public-pages.index" class="home-link">
               <img src="/ember_logo.png" alt="ember" />
               <strong>Basic</strong>
               {{! template-lint-disable no-pointer-down-event-binding }}
               <dd.Trigger
-                @htmlTag="span"
                 {{on "mousedown" this.preventIfNotInIndex}}
                 {{on "touchend" this.preventIfNotInIndex}}
                 class="logo-dropdown-button"

ember-basic-dropdown/src/components/basic-dropdown-trigger.gts

@@ -10,7 +10,7 @@ import type { Dropdown } from './basic-dropdown';
 import type { HorizontalPosition, VerticalPosition } from '../types.ts';
 
 export interface BasicDropdownTriggerSignature {
-  Element: HTMLElement;
+  Element: HTMLElement | HTMLButtonElement;
   Args: {
     dropdown?: Dropdown;
     eventType?: 'click' | 'mousedown';
@@ -19,7 +19,7 @@ export interface BasicDropdownTriggerSignature {
     hPosition?: HorizontalPosition | null;
     defaultClass?: string;
     renderInPlace?: boolean;
-    htmlTag?: keyof HTMLElementTagNameMap;
+    htmlTag?: keyof HTMLElementTagNameMap | undefined;
     onBlur?: (dropdown?: Dropdown, event?: FocusEvent) => void;
     onClick?: (dropdown?: Dropdown, event?: MouseEvent) => void;
     onFocus?: (dropdown?: Dropdown, event?: FocusEvent) => void;

ember-basic-dropdown/src/components/basic-dropdown.gts

@@ -65,6 +65,7 @@ export interface BasicDropdownArgs {
   rootEventType?: TRootEventType;
   preventScroll?: boolean;
   matchTriggerWidth?: boolean;
+  triggerHtmlTag?: keyof HTMLElementTagNameMap;
   onInit?: (dropdown: Dropdown) => void;
   registerAPI?: (dropdown: Dropdown | null) => void;
   onOpen?: (dropdown: Dropdown, e?: Event) => boolean | void;
@@ -533,6 +534,7 @@ export default class BasicDropdown extends Component<BasicDropdownSignature> {
           hPosition=this.hPosition
           renderInPlace=this.renderInPlace
           vPosition=this.vPosition
+          htmlTag=@triggerHtmlTag
         )
         Content=(component
           this.contentComponent

test-app/tests/integration/components/basic-dropdown-test.ts

@@ -1133,22 +1133,22 @@ module('Integration | Component | basic-dropdown', function (hooks) {
     assert.expect(12);
 
     await render(hbs`
-      <BasicDropdown as |parent|>
-        <parent.Trigger class='parent' @htmlTag="button">Trigger of the first dropdown</parent.Trigger>
+      <BasicDropdown @triggerHtmlTag="button" as |parent|>
+        <parent.Trigger class='parent'>Trigger of the first dropdown</parent.Trigger>
         <parent.Content @overlay={{true}}>
-          <BasicDropdown as |child|>
+          <BasicDropdown @triggerHtmlTag="button" as |child|>
             <p class="body-parent">
               <br>First level of the dropdpwn<br>
             </p>
-            <child.Trigger class='child' @htmlTag="button">Trigger of the second dropdown</child.Trigger>
+            <child.Trigger class='child'>Trigger of the second dropdown</child.Trigger>
             <child.Content @overlay={{true}}>
               <p class="body-child">
                 <br>Second level of the second<br>
-                <BasicDropdown as |grandchild|>
+                <BasicDropdown @triggerHtmlTag="button" as |grandchild|>
                   <p>
                     <br>Second level of the dropdpwn<br>
                   </p>
-                  <grandchild.Trigger class='grandchild' @htmlTag="button">Trigger of the Third dropdown</grandchild.Trigger>
+                  <grandchild.Trigger class='grandchild'>Trigger of the Third dropdown</grandchild.Trigger>
                   <grandchild.Content @overlay={{true}}>
                     <p class="body-grandchild">
                       <br>Third level of the third<br>