Merge branch 'master' into mpopov/calendar/refactoring

Author: desig9stein

CHANGELOG.md

@@ -4,6 +4,13 @@ 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/).
 
+## [6.3.4] - 2025-10-22
+### Fixed
+- #### Date picker
+  - Issues when clearing the value and notch border in Material theme [#1894](https://github.com/IgniteUI/igniteui-webcomponents/pull/1894)
+- #### Textarea
+  - Stale internal input reference when switching between themes
+
 ## [6.3.3] - 2025-10-14
 ### Fixed
 - #### Chat
@@ -1043,6 +1050,7 @@ Initial release of Ignite UI Web Components
 - Ripple component
 - Switch component
 
+[6.3.4]: https://github.com/IgniteUI/igniteui-webcomponents/compare/6.3.3...6.3.4
 [6.3.3]: https://github.com/IgniteUI/igniteui-webcomponents/compare/6.3.2...6.3.3
 [6.3.2]: https://github.com/IgniteUI/igniteui-webcomponents/compare/6.3.1...6.3.2
 [6.3.1]: https://github.com/IgniteUI/igniteui-webcomponents/compare/6.3.0...6.3.1

package-lock.json

@@ -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.spec.ts

@@ -441,6 +441,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.
@@ -933,7 +941,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/combo.ts

@@ -149,6 +149,21 @@ describe('Textarea component', () => {
       expect(prefixPart.hidden).to.be.true;
       expect(suffixPart.hidden).to.be.true;
     });
+
+    it('correctly recreates internal input query after re-renders', async () => {
+      element = await fixture(html`<igc-textarea></igc-textarea>`);
+      textArea = element.renderRoot.querySelector('textarea')!;
+
+      // Switching to material creates a new internal template with another textarea...
+      configureTheme('material');
+      await elementUpdated(element);
+
+      // ..thus the previously referenced non-material textarea should not match the internal query
+      expect(textArea !== (element as any)._input).to.be.true;
+
+      configureTheme('bootstrap');
+      await elementUpdated(element);
+    });
   });
 
   describe('Events', () => {

src/components/textarea/textarea.spec.ts

@@ -111,7 +111,7 @@ export default class IgcTextareaComponent extends FormAssociatedRequiredMixin(
     onChange: this._handleSlotChange,
   });
 
-  @query('textarea', true)
+  @query('textarea')
   private readonly _input!: HTMLTextAreaElement;
 
   protected override get __validators() {

src/components/textarea/textarea.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}