fix(tags): use proper type on default template remove button (#1293)

Author: dhayab

examples/github-notification-filters/components/TagItem.tsx

@@ -8,6 +8,7 @@ export function TagItem({ label, remove }: Tag) {
     <div className="aa-Tag">
       <span className="aa-TagLabel">{label}</span>
       <button
+        type="button"
         className="aa-TagRemoveButton"
         onClick={() => remove()}
         title="Remove this tag"

examples/query-suggestions-with-inline-categories/app.tsx

@@ -62,6 +62,7 @@ const querySuggestionsPlugin = createQuerySuggestionsPlugin({
 
               <div className="aa-ItemActions">
                 <button
+                  type="button"
                   className="aa-ItemActionButton"
                   title={`Fill query with "${item.query}"`}
                   onClick={(event) => {

examples/recently-viewed-items/recentlyViewedItemsPlugin.tsx

@@ -100,6 +100,7 @@ export function createLocalStorageRecentlyViewedItems<
                   </div>
                   <div className="aa-ItemActions">
                     <button
+                      type="button"
                       className="aa-ItemActionButton"
                       title="Remove this search"
                       onClick={(event) => {

examples/tags-in-searchbox/app.tsx

@@ -73,6 +73,7 @@ function TagItem<TTag>({ label, remove }: TagItemProps<TTag>) {
     <div className="aa-Tag">
       <span className="aa-TagLabel">{label}</span>
       <button
+        type="button"
         className="aa-TagRemoveButton"
         onClick={() => remove()}
         title="Remove this tag"

examples/two-column-layout/src/plugins/productsPlugin.tsx

@@ -172,6 +172,7 @@ function ProductItem({ hit, components }: ProductItemProps) {
         </div>
 
         <button
+          type="button"
           className="aa-ItemFavorite"
           onClick={(event) => {
             event.preventDefault();

examples/voice-search/voiceSearchPlugin.tsx

@@ -99,6 +99,7 @@ export function createVoiceSearchPlugin({
 function VoiceSearchButton({ onClick }) {
   return (
     <button
+      type="button"
       className="aa-VoiceSearchButton"
       title="Voice Search"
       onClick={(event) => {
@@ -143,6 +144,7 @@ function VoiceSearchOverlay({ status, transcript, onCancel }) {
     <div className="aa-VoiceSearchWrapper">
       <div>{transcript || getStatusText(status)}</div>
       <button
+        type="button"
         className="aa-VoiceSearchListeningButton"
         onClick={(event) => {
           event.preventDefault();

packages/autocomplete-plugin-query-suggestions/src/__tests__/createQuerySuggestionsPlugin.test.ts

@@ -160,6 +160,7 @@ describe('createQuerySuggestionsPlugin', () => {
                 <button
                   class="aa-ItemActionButton"
                   title="Fill query with \\"cooktop\\""
+                  type="button"
                 >
                   <svg
                     fill="currentColor"
@@ -208,6 +209,7 @@ describe('createQuerySuggestionsPlugin', () => {
                 <button
                   class="aa-ItemActionButton"
                   title="Fill query with \\"range\\""
+                  type="button"
                 >
                   <svg
                     fill="currentColor"
@@ -327,6 +329,7 @@ describe('createQuerySuggestionsPlugin', () => {
               <button
                 class="aa-ItemActionButton"
                 title="Fill query with \\"range\\""
+                type="button"
               >
                 <svg
                   fill="currentColor"
@@ -716,6 +719,7 @@ describe('createQuerySuggestionsPlugin', () => {
                 <button
                   class="aa-ItemActionButton"
                   title="TEST FILL \\"cooktop\\""
+                  type="button"
                 >
                   <svg
                     fill="currentColor"
@@ -764,6 +768,7 @@ describe('createQuerySuggestionsPlugin', () => {
                 <button
                   class="aa-ItemActionButton"
                   title="TEST FILL \\"range\\""
+                  type="button"
                 >
                   <svg
                     fill="currentColor"

packages/autocomplete-plugin-query-suggestions/src/getTemplates.tsx

@@ -52,6 +52,7 @@ export function getTemplates<TItem extends QuerySuggestionsHit>({
           </div>
           <div className="aa-ItemActions">
             <button
+              type="button"
               className="aa-ItemActionButton"
               title={translations.fillQueryTitle(item.query)}
               onClick={(event) => {

packages/autocomplete-plugin-recent-searches/src/__tests__/createRecentSearchesPlugin.test.ts

@@ -269,6 +269,7 @@ describe('createRecentSearchesPlugin', () => {
                 <button
                   class="aa-ItemActionButton"
                   title="Remove this search"
+                  type="button"
                 >
                   <svg
                     fill="currentColor"
@@ -282,6 +283,7 @@ describe('createRecentSearchesPlugin', () => {
                 <button
                   class="aa-ItemActionButton"
                   title="Fill query with \\"query\\""
+                  type="button"
                 >
                   <svg
                     fill="currentColor"
@@ -378,6 +380,7 @@ describe('createRecentSearchesPlugin', () => {
                 <button
                   class="aa-ItemActionButton"
                   title="TEST REMOVE"
+                  type="button"
                 >
                   <svg
                     fill="currentColor"
@@ -391,6 +394,7 @@ describe('createRecentSearchesPlugin', () => {
                 <button
                   class="aa-ItemActionButton"
                   title="TEST FILL QUERY \\"query\\""
+                  type="button"
                 >
                   <svg
                     fill="currentColor"
@@ -486,6 +490,7 @@ describe('createRecentSearchesPlugin', () => {
                 <button
                   class="aa-ItemActionButton"
                   title="TEST REMOVE"
+                  type="button"
                 >
                   <svg
                     fill="currentColor"
@@ -499,6 +504,7 @@ describe('createRecentSearchesPlugin', () => {
                 <button
                   class="aa-ItemActionButton"
                   title="Fill query with \\"query\\""
+                  type="button"
                 >
                   <svg
                     fill="currentColor"

packages/autocomplete-plugin-recent-searches/src/getTemplates.tsx

@@ -44,6 +44,7 @@ export function getTemplates<TItem extends RecentSearchesItem>({
           </div>
           <div className="aa-ItemActions">
             <button
+              type="button"
               className="aa-ItemActionButton"
               title={translations.removeSearchTitle}
               onClick={(event) => {
@@ -57,6 +58,7 @@ export function getTemplates<TItem extends RecentSearchesItem>({
               </svg>
             </button>
             <button
+              type="button"
               className="aa-ItemActionButton"
               title={translations.fillQueryTitle(item.label)}
               onClick={(event) => {

packages/autocomplete-plugin-tags/src/__tests__/createTagsPlugin.test.tsx

@@ -74,6 +74,7 @@ describe('createTagsPlugin', () => {
               <button
                 class="aa-TagsPlugin-RemoveButton"
                 title="Remove this tag"
+                type="button"
               >
                 <svg
                   fill="none"

packages/autocomplete-plugin-tags/src/createTagsPlugin.tsx

@@ -131,6 +131,7 @@ export function createTagsPlugin<
                   <div className="aa-TagsPlugin-Tag">
                     <span className="aa-TagsPlugin-TagLabel">{item.label}</span>
                     <button
+                      type="button"
                       className="aa-TagsPlugin-RemoveButton"
                       title="Remove this tag"
                     >