Merge branch 'master' into skrastev/localization-intl

Author: rkaraivanov

CHANGELOG.md

@@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+### Fixed
+- #### Tooltip
+  - Do not show tooltip when target is clicked [#1828](https://github.com/IgniteUI/igniteui-webcomponents/issues/1828)
+
 ## [6.3.4] - 2025-10-22
 ### Fixed
 - #### Date picker

src/components/combo/combo.spec.ts

@@ -445,6 +445,36 @@ describe('Combo', () => {
       });
     });
 
+    it('should hide the clear button when disableClear is true', async () => {
+      combo.select();
+      await elementUpdated(combo);
+
+      let button = combo.shadowRoot!.querySelector('[part="clear-icon"]');
+      expect(button).to.exist;
+      expect(button?.hasAttribute('hidden')).to.be.false;
+
+      combo.disableClear = true;
+      await elementUpdated(combo);
+
+      button = combo.shadowRoot!.querySelector('[part="clear-icon"]');
+      expect(button?.hasAttribute('hidden')).to.be.true;
+    });
+
+    it('should show the clear button when disableClear is false', async () => {
+      combo.disableClear = true;
+      combo.select();
+      await elementUpdated(combo);
+
+      let button = combo.shadowRoot!.querySelector('[part="clear-icon"]');
+      expect(button?.hasAttribute('hidden')).to.be.true;
+
+      combo.disableClear = false;
+      await elementUpdated(combo);
+
+      button = combo.shadowRoot!.querySelector('[part="clear-icon"]');
+      expect(button?.hasAttribute('hidden')).to.be.false;
+    });
+
     it('should toggle case sensitivity by pressing on the case sensitive icon', async () => {
       const button = combo.shadowRoot!.querySelector(
         '[part~="case-icon"]'

src/components/combo/combo.ts

@@ -445,6 +445,14 @@ export default class IgcComboComponent<
     return this._disableFiltering;
   }
 
+  /**
+   * Hides the clear button.
+   * @attr disable-clear
+   * @default false
+   */
+  @property({ type: Boolean, attribute: 'disable-clear' })
+  public disableClear = false;
+
   /* blazorSuppress */
   /**
    * The template used for the content of each combo item.
@@ -937,7 +945,7 @@ export default class IgcComboComponent<
         slot="suffix"
         part="clear-icon"
         @click=${this.handleClearIconClick}
-        ?hidden=${this._selection.isEmpty}
+        ?hidden=${this.disableClear || this._selection.isEmpty}
       >
         <slot name="clear-icon">
           <igc-icon

src/components/combo/operations/group.ts

@@ -1,45 +1,46 @@
-import { groupBy } from '../../common/util.js';
 import type { DataController } from '../controllers/data.js';
 import type { ComboRecord, Keys } from '../types.js';
 
-export default class GroupDataOperation<T extends object> {
-  protected orderBy = new Map(
-    Object.entries({
-      asc: 1,
-      desc: -1,
-    })
-  );
+const OrderBy = Object.freeze({ asc: 1, desc: -1 });
 
-  public apply(data: ComboRecord<T>[], controller: DataController<T>) {
+export default class GroupDataOperation<T extends object> {
+  public apply(
+    data: ComboRecord<T>[],
+    controller: DataController<T>
+  ): ComboRecord<T>[] {
     const {
       groupingOptions: { groupKey, valueKey, displayKey, direction },
     } = controller;
 
-    if (!groupKey) return data;
+    if (!groupKey) {
+      return data;
+    }
 
-    const groups = Object.entries(
-      groupBy(data, (item) => item.value[groupKey] ?? 'Other')
+    const grouped = Map.groupBy(
+      data,
+      (item) => (item.value[groupKey] as string) ?? 'Other'
     );
 
+    const keys = Array.from(grouped.keys());
+
     if (direction !== 'none') {
-      const orderBy = this.orderBy.get(direction);
-      groups.sort((a, b) => {
-        return orderBy! * controller.compareCollator.compare(a[0], b[0]);
-      });
+      const orderBy = OrderBy[direction];
+      keys.sort((a, b) => orderBy * controller.compareCollator.compare(a, b));
     }
 
-    return groups.flatMap(([group, items]) => {
-      items.unshift({
-        dataIndex: -1,
-        header: true,
-        value: {
-          [valueKey as Keys<T>]: group,
-          [displayKey as Keys<T>]: group,
-          [groupKey as Keys<T>]: group,
-        } as T,
-      });
-
-      return items;
+    return keys.flatMap((key) => {
+      return [
+        {
+          value: {
+            [valueKey as Keys<T>]: key,
+            [displayKey as Keys<T>]: key,
+            [groupKey as Keys<T>]: key,
+          } as T,
+          header: true,
+          dataIndex: -1,
+        },
+        ...(grouped.get(key) ?? []),
+      ];
     });
   }
 }

src/components/common/util.ts

@@ -168,24 +168,6 @@ export function findElementFromEventPath<T extends Element>(
   return getElementsFromEventPath(event).find(func) as T | undefined;
 }
 
-export function groupBy<T>(array: T[], key: keyof T | ((item: T) => any)) {
-  const result: Record<string, T[]> = {};
-  const _get = isFunction(key) ? key : (item: T) => item[key];
-
-  for (const item of array) {
-    const category = _get(item);
-    const group = result[category];
-
-    if (Array.isArray(group)) {
-      group.push(item);
-    } else {
-      result[category] = [item];
-    }
-  }
-
-  return result;
-}
-
 export function first<T>(arr: T[]) {
   return arr.at(0) as T;
 }

src/components/tooltip/controller.ts

@@ -133,6 +133,10 @@ class TooltipController implements ReactiveController {
     for (const each of this._hideTriggers) {
       addWeakEventListener(anchor, each, this, { passive: true, signal });
     }
+
+    if (!this._showTriggers.has('click') && !this._hideTriggers.has('click')) {
+      addWeakEventListener(anchor, 'click', this, { passive: true, signal });
+    }
   }
 
   private _addTooltipListeners(): void {
@@ -161,6 +165,15 @@ class TooltipController implements ReactiveController {
   }
 
   private async _handleAnchorEvent(event: Event): Promise<void> {
+    if (
+      !this.open &&
+      !this._showTriggers.has(event.type) &&
+      event.type === 'click'
+    ) {
+      this._options.onClick.call(this._host);
+      return;
+    }
+
     if (!this._open && this._showTriggers.has(event.type)) {
       await this._options.onShow.call(this._host);
     }
@@ -283,4 +296,5 @@ type TooltipCallbacks = {
   onShow: (event?: Event) => unknown;
   onHide: (event?: Event) => unknown;
   onEscape: (event?: Event) => unknown;
+  onClick: (event?: Event) => unknown;
 };

src/components/tooltip/tooltip.spec.ts

@@ -534,7 +534,7 @@ describe('Tooltip', () => {
 
   describe('Behaviors', () => {
     beforeEach(async () => {
-      clock = useFakeTimers({ toFake: ['setTimeout'] });
+      clock = useFakeTimers({ toFake: ['setTimeout', 'clearTimeout'] });
       const container = await fixture(createTooltipWithTarget());
       anchor = container.querySelector('button')!;
       tooltip = container.querySelector(IgcTooltipComponent.tagName)!;
@@ -660,6 +660,40 @@ describe('Tooltip', () => {
       await hideComplete(tooltip);
       expect(tooltip.open).to.be.false;
     });
+
+    it('prevents tooltip from showing when clicking the target - #1828', async () => {
+      const eventSpy = spy(tooltip, 'emitEvent');
+
+      tooltip.showTriggers = 'pointerenter';
+      tooltip.hideTriggers = 'pointerleave';
+
+      simulatePointerEnter(anchor);
+      await clock.tickAsync(199);
+      expect(tooltip.open).to.be.false;
+
+      // Click on the target before the tooltip is shown
+      simulateClick(anchor);
+      await clock.tickAsync(1);
+      await showComplete(tooltip);
+      expect(tooltip.open).to.be.false;
+      expect(eventSpy.callCount).to.equal(1);
+
+      eventSpy.resetHistory();
+
+      // Does not prevent showing when showTriggers includes 'click'
+      tooltip.showTriggers = 'click';
+
+      simulateClick(anchor);
+      await clock.tickAsync(DEFAULT_SHOW_DELAY);
+      await showComplete(tooltip);
+      expect(tooltip.open).to.be.true;
+
+      simulatePointerLeave(anchor);
+      await clock.tickAsync(endTick(DEFAULT_HIDE_DELAY));
+      await hideComplete(tooltip);
+      expect(tooltip.open).to.be.false;
+      expect(eventSpy.callCount).to.equal(4);
+    });
   });
 
   describe('Events', () => {

src/components/tooltip/tooltip.ts

@@ -77,6 +77,7 @@ export default class IgcTooltipComponent extends EventEmitterMixin<
     onShow: this._showOnInteraction,
     onHide: this._hideOnInteraction,
     onEscape: this._hideOnEscape,
+    onClick: this._stopTimeoutAndAnimation,
   });
 
   private readonly _containerRef = createRef<HTMLElement>();

stories/combo.stories.ts

@@ -134,6 +134,12 @@ const metadata: Meta<IgcComboComponent> = {
       control: 'boolean',
       table: { defaultValue: { summary: 'false' } },
     },
+    disableClear: {
+      type: 'boolean',
+      description: 'Hides the clear button.',
+      control: 'boolean',
+      table: { defaultValue: { summary: 'false' } },
+    },
     required: {
       type: 'boolean',
       description:
@@ -168,6 +174,7 @@ const metadata: Meta<IgcComboComponent> = {
     groupSorting: 'asc',
     caseSensitiveIcon: false,
     disableFiltering: false,
+    disableClear: false,
     required: false,
     disabled: false,
     invalid: false,
@@ -207,6 +214,8 @@ interface IgcComboArgs {
   caseSensitiveIcon: boolean;
   /** Disables the filtering of the list of options. */
   disableFiltering: boolean;
+  /** Hides the clear button. */
+  disableClear: boolean;
   /** When set, makes the component a required field for validation. */
   required: boolean;
   /** The name attribute of the control. */
@@ -323,6 +332,7 @@ export const Default: Story = {
       .groupSorting=${args.groupSorting}
       ?case-sensitive-icon=${args.caseSensitiveIcon}
       ?disable-filtering=${args.disableFiltering}
+      ?disable-clear=${args.disableClear}
       ?open=${args.open}
       ?autofocus=${args.autofocus}
       ?autofocus-list=${args.autofocusList}

tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "es2022",
     "module": "NodeNext",
-    "lib": ["es2023", "DOM", "DOM.Iterable"],
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "outDir": "dist",
     "rootDir": "./",
     "declaration": true,