diff --git a/.vscode/settings.json b/.vscode/settings.json
index 2c1485213..c3749ad98 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -27,6 +27,7 @@
     "**/src/**/*.spec.ts": "typescriptreact"
   },
   "git.enableCommitSigning": true,
+  "prettier.prettierPath": "./node_modules/prettier",
   "editor.codeLens": true,
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
diff --git a/playwright/cps-ui-kit/components/cps-tree-autocomplete.spec.ts b/playwright/cps-ui-kit/components/cps-tree-autocomplete.spec.ts
new file mode 100644
index 000000000..54161162b
--- /dev/null
+++ b/playwright/cps-ui-kit/components/cps-tree-autocomplete.spec.ts
@@ -0,0 +1,385 @@
+import { test, expect, type Page, type Locator } from '@playwright/test';
+
+function example(page: Page, testId: string): Locator {
+  return page.getByTestId(testId);
+}
+
+async function open(wrapper: Locator): Promise<void> {
+  await wrapper.getByTestId('cps-treeautocomplete-box').click();
+}
+
+test.describe('cps-tree-autocomplete', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/tree-autocomplete');
+  });
+
+  test.describe('Real keyboard navigation', () => {
+    test('ArrowDown moves real focus between real treeitems', async ({
+      page
+    }) => {
+      const wrapper = example(page, 'required-tree-autocomplete');
+      await open(wrapper);
+
+      const attr2 = page.getByRole('treeitem', { name: 'Attr2_2' });
+      const attr3 = page.getByRole('treeitem', { name: 'Attr3_2' });
+      await attr2.focus();
+
+      await page.keyboard.press('ArrowDown');
+      await expect(attr3).toBeFocused();
+    });
+
+    test('Escape closes the real dropdown', async ({ page }) => {
+      const wrapper = example(page, 'required-tree-autocomplete');
+      await open(wrapper);
+
+      await expect(page.getByRole('treeitem').first()).toBeVisible();
+      await page.keyboard.press('Escape');
+      await expect(page.getByRole('treeitem')).toHaveCount(0);
+    });
+  });
+
+  test.describe('Real directory expand/collapse via click', () => {
+    test('clicking a directory row toggles its real aria-expanded state and reveals its children', async ({
+      page
+    }) => {
+      const wrapper = example(page, 'required-tree-autocomplete');
+      await open(wrapper);
+
+      const directory = page.getByRole('treeitem', { name: 'Dataset 1' });
+      await expect(directory).toHaveAttribute('aria-expanded', 'false');
+
+      await directory.click();
+
+      await expect(directory).toHaveAttribute('aria-expanded', 'true');
+      await expect(
+        page.getByRole('treeitem', { name: 'Attr1_1' })
+      ).toBeVisible();
+    });
+  });
+
+  test.describe('Real Enter/Space on a leaf node', () => {
+    test('Enter selects a leaf node and closes the dropdown despite the keydown handler calling preventDefault', async ({
+      page
+    }) => {
+      const wrapper = example(page, 'required-tree-autocomplete');
+      await open(wrapper);
+
+      const leaf = page.getByRole('treeitem', { name: 'Attr2_2' });
+      await leaf.focus();
+      await page.keyboard.press('Enter');
+
+      await expect(
+        wrapper.getByTestId('cps-treeautocomplete-selected-value')
+      ).toHaveText('Attr2_2');
+      await expect(page.getByRole('treeitem')).toHaveCount(0);
+    });
+
+    test('Space selects a leaf node and closes the dropdown', async ({
+      page
+    }) => {
+      const wrapper = example(page, 'required-tree-autocomplete');
+      await open(wrapper);
+
+      const leaf = page.getByRole('treeitem', { name: 'Attr3_2' });
+      await leaf.focus();
+      await page.keyboard.press('Space');
+
+      await expect(
+        wrapper.getByTestId('cps-treeautocomplete-selected-value')
+      ).toHaveText('Attr3_2');
+      await expect(page.getByRole('treeitem')).toHaveCount(0);
+    });
+  });
+
+  test.describe('Real Enter on a directory node', () => {
+    test('expands the directory instead of selecting/closing', async ({
+      page
+    }) => {
+      const wrapper = example(page, 'required-tree-autocomplete');
+      await open(wrapper);
+
+      const directory = page.getByRole('treeitem', { name: 'Dataset 3' });
+      await directory.focus();
+      await expect(directory).toHaveAttribute('aria-expanded', 'false');
+
+      await page.keyboard.press('Enter');
+
+      await expect(directory).toHaveAttribute('aria-expanded', 'true');
+      await expect(page.getByRole('treeitem')).not.toHaveCount(0);
+    });
+  });
+
+  test.describe('Real virtual scroll rendering', () => {
+    test('a virtualized tree renders real treeitem nodes on open', async ({
+      page
+    }) => {
+      const wrapper = example(page, 'virtual-scroll-tree-autocomplete');
+      await open(wrapper);
+
+      await expect(page.getByRole('treeitem').first()).toBeVisible();
+    });
+  });
+
+  test.describe('Real chip removal', () => {
+    test('clicking a chip close button removes it from the real selection', async ({
+      page
+    }) => {
+      const wrapper = example(page, 'virtual-scroll-tree-autocomplete');
+      const chips = wrapper
+        .getByTestId('cps-treeautocomplete-chips-group')
+        .locator('cps-chip');
+      await expect(chips.first()).toBeVisible();
+      const initialCount = await chips.count();
+      expect(initialCount).toBeGreaterThan(0);
+
+      await chips.first().getByRole('button').click();
+
+      await expect(chips).toHaveCount(initialCount - 1);
+    });
+
+    test('double-Backspace removes the last chip', async ({ page }) => {
+      const wrapper = example(page, 'virtual-scroll-tree-autocomplete');
+      const chips = wrapper
+        .getByTestId('cps-treeautocomplete-chips-group')
+        .locator('cps-chip');
+      await expect(chips.first()).toBeVisible();
+      const initialCount = await chips.count();
+      expect(initialCount).toBeGreaterThan(0);
+
+      const input = wrapper.getByTestId('cps-treeautocomplete-input');
+      await input.click();
+      await expect(input).toBeFocused();
+      await page.keyboard.press('Backspace');
+      await page.keyboard.press('Backspace');
+
+      await expect(chips).toHaveCount(initialCount - 1);
+    });
+  });
+
+  test.describe('Real prefix icon', () => {
+    test('the configured prefix icon renders in the real box', async ({
+      page
+    }) => {
+      const wrapper = example(page, 'prefix-icon-tree-autocomplete');
+
+      await expect(
+        wrapper.getByTestId('cps-treeautocomplete-prefix-icon')
+      ).toBeVisible();
+    });
+  });
+
+  test.describe('Real required-field validation', () => {
+    test('clearing the value and blurring shows a real required-field error', async ({
+      page
+    }) => {
+      const wrapper = example(page, 'required-tree-autocomplete');
+      const input = wrapper.getByTestId('cps-treeautocomplete-input');
+
+      await wrapper.getByTestId('cps-treeautocomplete-clear-icon').click();
+      await input.focus();
+      await page.keyboard.press('Tab');
+
+      const error = wrapper.getByTestId('cps-treeautocomplete-error');
+      await expect(error).toHaveText('Field is required');
+      const describedBy = await input.getAttribute('aria-describedby');
+      expect(describedBy).toBeTruthy();
+      await expect(error).toHaveAttribute('id', describedBy!);
+      await expect(input).toHaveAttribute('aria-invalid', 'true');
+    });
+  });
+
+  test.describe('Real two-way binding - real readout', () => {
+    test('selecting a node updates the visible bound value', async ({
+      page
+    }) => {
+      const wrapper = example(page, 'two-way-binding-tree-autocomplete');
+      const readout = page.getByTestId(
+        'two-way-binding-tree-autocomplete-value'
+      );
+
+      await open(wrapper);
+      await page.getByRole('treeitem', { name: 'Attr3_2' }).click();
+
+      await expect(readout).toHaveText('Attr3_2');
+    });
+  });
+
+  test.describe('Real accessible-name computation', () => {
+    test('an unlabeled tree autocomplete exposes its ariaLabel as the real accessible name', async ({
+      page
+    }) => {
+      await expect(
+        page.getByRole('combobox', { name: 'Select an item', exact: true })
+      ).toBeVisible();
+    });
+  });
+
+  test.describe('hideDetails suppresses the hint/error row entirely', () => {
+    test('no hint element is rendered when hideDetails is set', async ({
+      page
+    }) => {
+      const hint = example(page, 'hide-details-tree-autocomplete').getByTestId(
+        'cps-treeautocomplete-hint'
+      );
+
+      await expect(hint).toHaveCount(0);
+    });
+  });
+
+  test.describe('openOnClear=false', () => {
+    test('clearing a pre-filled tree autocomplete does not reopen the dropdown', async ({
+      page
+    }) => {
+      const wrapper = example(page, 'open-on-clear-false-tree-autocomplete');
+
+      await wrapper.getByTestId('cps-treeautocomplete-clear-icon').click();
+
+      await expect(page.getByRole('treeitem')).toHaveCount(0);
+      await expect(
+        wrapper.getByTestId('cps-treeautocomplete-selected-value')
+      ).toHaveCount(0);
+    });
+  });
+
+  test.describe('Real typing filters the tree', () => {
+    test('typing a leaf label narrows the real tree to matching nodes', async ({
+      page
+    }) => {
+      const wrapper = example(page, 'required-tree-autocomplete');
+      const input = wrapper.getByTestId('cps-treeautocomplete-input');
+      await input.click();
+      await expect(page.getByRole('treeitem').first()).toBeVisible();
+
+      await input.fill('AttrB');
+
+      await expect(page.getByRole('treeitem', { name: 'AttrB' })).toBeVisible();
+      await expect(
+        page.getByRole('treeitem', { name: 'Dataset 2' })
+      ).toHaveCount(0);
+    });
+  });
+
+  test.describe('Real Enter confirms typed text', () => {
+    test('Enter with text matching a node label exactly selects that node and closes the dropdown', async ({
+      page
+    }) => {
+      const wrapper = example(page, 'required-tree-autocomplete');
+      const input = wrapper.getByTestId('cps-treeautocomplete-input');
+      await input.click();
+      await input.fill('AttrB');
+
+      await page.keyboard.press('Enter');
+
+      await expect(
+        wrapper.getByTestId('cps-treeautocomplete-selected-value')
+      ).toHaveText('AttrB');
+      await expect(page.getByRole('treeitem')).toHaveCount(0);
+    });
+
+    test('Enter with text matching no node reverts the input to the current selection label', async ({
+      page
+    }) => {
+      const wrapper = example(page, 'required-tree-autocomplete');
+      const input = wrapper.getByTestId('cps-treeautocomplete-input');
+      const previousLabel = await wrapper
+        .getByTestId('cps-treeautocomplete-selected-value')
+        .textContent();
+      await input.click();
+      await input.fill('zzz-no-such-node-zzz');
+
+      await page.keyboard.press('Enter');
+
+      await expect(input).toHaveValue(previousLabel!);
+      await expect(
+        wrapper.getByTestId('cps-treeautocomplete-selected-value')
+      ).toHaveText(previousLabel!);
+    });
+  });
+
+  test.describe('Real expandAll()/collapseAll()', () => {
+    test('Expand All reveals a two-level-deep node without any manual clicks', async ({
+      page
+    }) => {
+      const wrapper = example(page, 'expand-collapse-tree-autocomplete');
+
+      await page.getByTestId('expand-all-tree-autocomplete-btn').click();
+      await open(wrapper);
+
+      await expect(
+        page.getByRole('treeitem', { name: 'Dataset 1' })
+      ).toHaveAttribute('aria-expanded', 'true');
+      await expect(
+        page.getByRole('treeitem', { name: 'Attr1_1' })
+      ).toHaveAttribute('aria-expanded', 'true');
+      await expect(page.getByRole('treeitem', { name: 'AttrA' })).toBeVisible();
+    });
+
+    test('Collapse All hides a previously-expanded node', async ({ page }) => {
+      const wrapper = example(page, 'expand-collapse-tree-autocomplete');
+
+      await open(wrapper);
+      await page.getByRole('treeitem', { name: 'Dataset 1' }).click();
+      await expect(
+        page.getByRole('treeitem', { name: 'Attr1_1' })
+      ).toBeVisible();
+      await page.keyboard.press('Escape');
+
+      await page.getByTestId('collapse-all-tree-autocomplete-btn').click();
+      await open(wrapper);
+
+      await expect(
+        page.getByRole('treeitem', { name: 'Dataset 1' })
+      ).toHaveAttribute('aria-expanded', 'false');
+      await expect(page.getByRole('treeitem', { name: 'Attr1_1' })).toHaveCount(
+        0
+      );
+    });
+  });
+
+  test.describe('Real custom empty message', () => {
+    test('typing text with no matches shows the configured emptyMessage', async ({
+      page
+    }) => {
+      const wrapper = example(page, 'empty-message-tree-autocomplete');
+      const input = wrapper.getByTestId('cps-treeautocomplete-input');
+      await input.click();
+      await expect(page.getByRole('treeitem').first()).toBeVisible();
+
+      await input.fill('zzz-no-such-node-zzz');
+
+      await expect(
+        page
+          .getByTestId('cps-treeautocomplete-options')
+          .getByText('Nothing matches your search')
+      ).toBeVisible();
+      await expect(page.getByRole('treeitem')).toHaveCount(0);
+    });
+  });
+
+  test.describe('Real focus behavior', () => {
+    test('clicking the box moves real DOM focus to the input', async ({
+      page
+    }) => {
+      const wrapper = example(page, 'required-tree-autocomplete');
+      await open(wrapper);
+
+      await expect(
+        wrapper.getByTestId('cps-treeautocomplete-input')
+      ).toBeFocused();
+    });
+
+    test('clicking the box visually hides the selected-label span behind the now-active input', async ({
+      page
+    }) => {
+      const wrapper = example(page, 'required-tree-autocomplete');
+      const selectedValue = wrapper.getByTestId(
+        'cps-treeautocomplete-selected-value'
+      );
+      await expect(selectedValue).toHaveCSS('opacity', '1');
+
+      await open(wrapper);
+
+      await expect(selectedValue).toHaveCSS('opacity', '0');
+    });
+  });
+});
diff --git a/projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.component.html b/projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.component.html
index cbb019e06..804994078 100644
--- a/projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.component.html
+++ b/projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.component.html
@@ -6,6 +6,7 @@
     [tsCode]="examples.requiredTreeAutocomplete.ts">
     <form [formGroup]="form">
       <cps-tree-autocomplete
+        data-testid="required-tree-autocomplete"
         label="Required single tree autocomplete with a tooltip"
         [options]="options"
         optionLabel="label"
@@ -18,11 +19,40 @@
     </form>
   </app-code-example>
 
+  <app-code-example
+    label="Tree autocomplete with expand/collapse all controls"
+    [htmlCode]="examples.expandCollapseTreeAutocomplete.html"
+    [tsCode]="examples.expandCollapseTreeAutocomplete.ts">
+    <cps-tree-autocomplete
+      #expandCollapseTreeAutocompleteRef
+      data-testid="expand-collapse-tree-autocomplete"
+      label="Tree autocomplete with expand/collapse all controls"
+      [options]="options"
+      optionLabel="label"
+      optionInfo="attrType"
+      placeholder="Select element"
+      [clearable]="true">
+    </cps-tree-autocomplete>
+    <div class="tree-autocomplete-actions">
+      <cps-button
+        data-testid="expand-all-tree-autocomplete-btn"
+        label="Expand All"
+        (clicked)="expandCollapseTreeAutocompleteRef.expandAll()"></cps-button>
+      <cps-button
+        data-testid="collapse-all-tree-autocomplete-btn"
+        label="Collapse All"
+        (clicked)="
+          expandCollapseTreeAutocompleteRef.collapseAll()
+        "></cps-button>
+    </div>
+  </app-code-example>
+
   <app-code-example
     label="Loading tree autocomplete"
     [htmlCode]="examples.loadingTreeAutocomplete.html"
     [tsCode]="examples.loadingTreeAutocomplete.ts">
     <cps-tree-autocomplete
+      data-testid="loading-tree-autocomplete"
       label="Loading tree autocomplete"
       [loading]="true"
       [options]="options"
@@ -35,6 +65,7 @@
     label="Disabled tree autocomplete"
     [htmlCode]="examples.disabledTreeAutocomplete.html">
     <cps-tree-autocomplete
+      data-testid="disabled-tree-autocomplete"
       label="Disabled tree autocomplete"
       [disabled]="true"
       hint="This tree autocomplete is disabled">
@@ -46,6 +77,7 @@
     [htmlCode]="examples.multipleTreeAutocomplete.html"
     [tsCode]="examples.multipleTreeAutocomplete.ts">
     <cps-tree-autocomplete
+      data-testid="multiple-tree-autocomplete"
       label="Multiple tree autocomplete"
       [options]="options"
       optionLabel="label"
@@ -63,6 +95,7 @@
     [htmlCode]="examples.virtualScrollTreeAutocomplete.html"
     [tsCode]="examples.virtualScrollTreeAutocomplete.ts">
     <cps-tree-autocomplete
+      data-testid="virtual-scroll-tree-autocomplete"
       label="Multiple tree autocomplete with virtual scroll, chips and persistent clear icon"
       [options]="options"
       optionLabel="label"
@@ -81,6 +114,7 @@
     [htmlCode]="examples.nonClosableChipsTreeAutocomplete.html"
     [tsCode]="examples.nonClosableChipsTreeAutocomplete.ts">
     <cps-tree-autocomplete
+      data-testid="non-closable-chips-tree-autocomplete"
       label="Multiple tree autocomplete with non-closable chips"
       [options]="options"
       optionInfo="attrType"
@@ -97,6 +131,7 @@
     [htmlCode]="examples.prefixIconTreeAutocomplete.html"
     [tsCode]="examples.prefixIconTreeAutocomplete.ts">
     <cps-tree-autocomplete
+      data-testid="prefix-icon-tree-autocomplete"
       label="Multiple tree autocomplete with prefix icon"
       [options]="options"
       optionInfo="attrType"
@@ -114,6 +149,7 @@
     [tsCode]="examples.twoWayBindingTreeAutocomplete.ts">
     <div class="sync-val-example">
       <cps-tree-autocomplete
+        data-testid="two-way-binding-tree-autocomplete"
         [initialExpandDirectories]="true"
         width="31.25rem"
         label="Single tree autocomplete with two-way binding, enter something"
@@ -125,7 +161,11 @@
         [(ngModel)]="syncVal"
         [ngModelOptions]="{ standalone: true }">
       </cps-tree-autocomplete>
-      <span class="sync-val">{{ syncVal?.label }}</span>
+      <span
+        class="sync-val"
+        data-testid="two-way-binding-tree-autocomplete-value"
+        >{{ syncVal?.label }}</span
+      >
     </div>
   </app-code-example>
 
@@ -134,6 +174,7 @@
     [htmlCode]="examples.underlinedTreeAutocomplete.html"
     [tsCode]="examples.underlinedTreeAutocomplete.ts">
     <cps-tree-autocomplete
+      data-testid="underlined-tree-autocomplete"
       label="Underlined tree autocomplete"
       [options]="options"
       optionInfo="attrType"
@@ -150,6 +191,7 @@
     [htmlCode]="examples.borderlessTreeAutocomplete.html"
     [tsCode]="examples.borderlessTreeAutocomplete.ts">
     <cps-tree-autocomplete
+      data-testid="borderless-tree-autocomplete"
       label="Borderless tree autocomplete"
       [options]="options"
       optionInfo="attrType"
@@ -160,4 +202,55 @@
       prefixIcon="search">
     </cps-tree-autocomplete>
   </app-code-example>
+
+  <app-code-example
+    label="Unlabeled tree autocomplete with an accessible name"
+    [htmlCode]="examples.ariaLabelTreeAutocomplete.html"
+    [tsCode]="examples.ariaLabelTreeAutocomplete.ts">
+    <cps-tree-autocomplete
+      data-testid="aria-label-tree-autocomplete"
+      ariaLabel="Select an item"
+      [options]="options">
+    </cps-tree-autocomplete>
+  </app-code-example>
+
+  <app-code-example
+    label="Tree autocomplete with hidden hint/error details"
+    [htmlCode]="examples.hideDetailsTreeAutocomplete.html"
+    [tsCode]="examples.hideDetailsTreeAutocomplete.ts">
+    <cps-tree-autocomplete
+      data-testid="hide-details-tree-autocomplete"
+      label="Tree autocomplete with hidden hint/error details"
+      hint="You should not see this hint"
+      [options]="options"
+      [hideDetails]="true">
+    </cps-tree-autocomplete>
+  </app-code-example>
+
+  <app-code-example
+    label="Tree autocomplete with openOnClear disabled"
+    [htmlCode]="examples.openOnClearFalseTreeAutocomplete.html"
+    [tsCode]="examples.openOnClearFalseTreeAutocomplete.ts">
+    <cps-tree-autocomplete
+      data-testid="open-on-clear-false-tree-autocomplete"
+      label="Tree autocomplete with openOnClear disabled"
+      hint="Clearing this tree autocomplete will not reopen the dropdown"
+      [options]="options"
+      [value]="options[1].children[0]"
+      [clearable]="true"
+      [openOnClear]="false">
+    </cps-tree-autocomplete>
+  </app-code-example>
+
+  <app-code-example
+    label="Tree autocomplete with a custom empty message"
+    [htmlCode]="examples.emptyMessageTreeAutocomplete.html"
+    [tsCode]="examples.emptyMessageTreeAutocomplete.ts">
+    <cps-tree-autocomplete
+      data-testid="empty-message-tree-autocomplete"
+      label="Type something that won't match to see the custom message"
+      [options]="options"
+      emptyMessage="Nothing matches your search">
+    </cps-tree-autocomplete>
+  </app-code-example>
 </app-component-docs-viewer>
diff --git a/projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.component.scss b/projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.component.scss
index fe6f52680..6fe19008c 100644
--- a/projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.component.scss
+++ b/projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.component.scss
@@ -5,3 +5,9 @@
     margin-left: 1.5rem;
   }
 }
+
+.tree-autocomplete-actions {
+  display: flex;
+  gap: 0.75rem;
+  margin-top: 0.75rem;
+}
diff --git a/projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.component.ts b/projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.component.ts
index db3aa9fed..bed256997 100644
--- a/projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.component.ts
+++ b/projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.component.ts
@@ -6,7 +6,7 @@ import {
   UntypedFormGroup,
   Validators
 } from '@angular/forms';
-import { CpsTreeAutocompleteComponent } from 'cps-ui-kit';
+import { CpsButtonComponent, CpsTreeAutocompleteComponent } from 'cps-ui-kit';
 import ComponentData from '../../api-data/cps-tree-autocomplete.json';
 import { ComponentDocsViewerComponent } from '../../components/component-docs-viewer/component-docs-viewer.component';
 import { CodeExampleComponent } from '../../components/code-example/code-example.component';
@@ -15,6 +15,7 @@ import { treeAutocompleteExamples } from './tree-autocomplete-page.examples';
 @Component({
   imports: [
     CpsTreeAutocompleteComponent,
+    CpsButtonComponent,
     FormsModule,
     ReactiveFormsModule,
     ComponentDocsViewerComponent,
diff --git a/projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.examples.ts b/projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.examples.ts
index f3d14b988..96f7506c3 100644
--- a/projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.examples.ts
+++ b/projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.examples.ts
@@ -121,6 +121,26 @@ ngOnInit(): void {
 }`
   },
 
+  expandCollapseTreeAutocomplete: {
+    html: `
+<cps-tree-autocomplete
+  #expandCollapseTreeAutocompleteRef
+  label="Tree autocomplete with expand/collapse all controls"
+  [options]="options"
+  optionLabel="label"
+  optionInfo="attrType"
+  placeholder="Select element"
+  [clearable]="true">
+</cps-tree-autocomplete>
+<cps-button
+  label="Expand All"
+  (clicked)="expandCollapseTreeAutocompleteRef.expandAll()"></cps-button>
+<cps-button
+  label="Collapse All"
+  (clicked)="expandCollapseTreeAutocompleteRef.collapseAll()"></cps-button>`,
+    ts: treeOptionsTs
+  },
+
   loadingTreeAutocomplete: {
     html: `
 <cps-tree-autocomplete
@@ -263,6 +283,49 @@ syncVal: any = null;`
   [chips]="false"
   appearance="borderless"
   prefixIcon="search">
+</cps-tree-autocomplete>`,
+    ts: treeOptionsTs
+  },
+
+  ariaLabelTreeAutocomplete: {
+    html: `
+<cps-tree-autocomplete
+  ariaLabel="Select an item"
+  [options]="options">
+</cps-tree-autocomplete>`,
+    ts: treeOptionsTs
+  },
+
+  hideDetailsTreeAutocomplete: {
+    html: `
+<cps-tree-autocomplete
+  label="Tree autocomplete with hidden hint/error details"
+  hint="You should not see this hint"
+  [options]="options"
+  [hideDetails]="true">
+</cps-tree-autocomplete>`,
+    ts: treeOptionsTs
+  },
+
+  openOnClearFalseTreeAutocomplete: {
+    html: `
+<cps-tree-autocomplete
+  label="Tree autocomplete with openOnClear disabled"
+  hint="Clearing this tree autocomplete will not reopen the dropdown"
+  [options]="options"
+  [value]="options[1].children[0]"
+  [clearable]="true"
+  [openOnClear]="false">
+</cps-tree-autocomplete>`,
+    ts: treeOptionsTs
+  },
+
+  emptyMessageTreeAutocomplete: {
+    html: `
+<cps-tree-autocomplete
+  label="Type something that won't match to see the custom message"
+  [options]="options"
+  emptyMessage="Nothing matches your search">
 </cps-tree-autocomplete>`,
     ts: treeOptionsTs
   }
diff --git a/projects/cps-ui-kit/src/lib/components/cps-tree-autocomplete/cps-tree-autocomplete.component.html b/projects/cps-ui-kit/src/lib/components/cps-tree-autocomplete/cps-tree-autocomplete.component.html
index 45dd18811..1e1679083 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-tree-autocomplete/cps-tree-autocomplete.component.html
+++ b/projects/cps-ui-kit/src/lib/components/cps-tree-autocomplete/cps-tree-autocomplete.component.html
@@ -1,6 +1,7 @@
 <div
   [style.width]="cvtWidth"
   class="cps-treeautocomplete"
+  data-testid="cps-treeautocomplete"
   tabindex="-1"
   (keydown)="onOuterDivKeyDown($event)"
   [class.disabled]="disabled"
@@ -9,11 +10,14 @@
   [class.opened]="isOpened"
   #componentContainer>
   @if (label) {
-    <div class="cps-treeautocomplete-label">
-      <label>{{ label }}</label>
+    <div
+      class="cps-treeautocomplete-label"
+      data-testid="cps-treeautocomplete-label">
+      <label data-testid="cps-treeautocomplete-label-text">{{ label }}</label>
       @if (infoTooltip) {
         <cps-info-circle
           class="cps-treeautocomplete-label-info-circle"
+          data-testid="cps-treeautocomplete-info-circle"
           size="xsmall"
           [tooltipPosition]="infoTooltipPosition"
           [tooltipContentClass]="infoTooltipClass"
@@ -28,18 +32,26 @@
     (mousedown)="onContainerMouseDown($event)"
     (keydown)="onContainerKeyDown($event)"
     class="cps-treeautocomplete-container"
+    data-testid="cps-treeautocomplete-container"
     [class.focused]="isActive()"
     [class.keyboard-focused]="isKeyboardFocused"
     [class.persistent-clear]="persistentClear"
     [class.borderless]="appearance === 'borderless'"
     [class.underlined]="appearance === 'underlined'">
-    <div class="cps-treeautocomplete-box" #boxEl (mousedown)="onBoxClick()">
-      <div class="cps-treeautocomplete-box-area">
+    <div
+      class="cps-treeautocomplete-box"
+      data-testid="cps-treeautocomplete-box"
+      #boxEl
+      (mousedown)="onBoxClick()">
+      <div
+        class="cps-treeautocomplete-box-area"
+        data-testid="cps-treeautocomplete-box-area">
         @if (prefixIcon) {
           <cps-icon
             [icon]="prefixIcon"
             [style.color]="disabled ? '#9a9595' : null"
             [size]="prefixIconSize"
+            data-testid="cps-treeautocomplete-prefix-icon"
             class="prefix-icon">
           </cps-icon>
         }
@@ -47,13 +59,21 @@
           (treeSelection && !multiple) ||
           (treeSelection?.length > 0 && multiple)
         ) {
-          <div class="cps-treeautocomplete-box-items">
+          <div
+            class="cps-treeautocomplete-box-items"
+            data-testid="cps-treeautocomplete-box-items">
             @if (!multiple) {
-              <span class="single-item">
-                <div class="single-item-selection">
-                  <span [style.opacity]="activeSingle ? 0 : 1">{{
-                    treeSelection.label
-                  }}</span>
+              <span
+                class="single-item"
+                data-testid="cps-treeautocomplete-single-item">
+                <div
+                  class="single-item-selection"
+                  data-testid="cps-treeautocomplete-single-item-selection">
+                  <span
+                    data-testid="cps-treeautocomplete-selected-value"
+                    [style.opacity]="activeSingle ? 0 : 1"
+                    >{{ treeSelection.label }}</span
+                  >
                 </div>
                 <ng-container
                   *ngTemplateOutlet="
@@ -67,18 +87,31 @@
               </span>
             }
             @if (multiple && !chips) {
-              <div class="text-group" role="list" aria-label="Selected options">
-                @for (val of treeSelection; track val; let last = $last) {
+              <div
+                class="text-group"
+                data-testid="cps-treeautocomplete-text-group"
+                role="list"
+                aria-label="Selected options">
+                @for (
+                  val of treeSelection;
+                  track val;
+                  let last = $last;
+                  let i = $index
+                ) {
                   <div
                     role="listitem"
                     class="text-group-item"
+                    [attr.data-testid]="
+                      'cps-treeautocomplete-selected-text-item-' + i
+                    "
                     [class.about-to-remove]="last && backspaceClickedOnce">
                     {{ val.label }}{{ !last ? ',' : '' }}
                   </div>
                 }
                 <span
                   role="listitem"
-                  class="cps-treeautocomplete-input-listitem">
+                  class="cps-treeautocomplete-input-listitem"
+                  data-testid="cps-treeautocomplete-input-listitem">
                   <ng-container
                     *ngTemplateOutlet="
                       treeAutocompleteInputTemplate;
@@ -92,12 +125,19 @@
             @if (multiple && chips) {
               <div
                 class="chips-group"
+                data-testid="cps-treeautocomplete-chips-group"
                 role="list"
                 aria-label="Selected options">
-                @for (val of treeSelection; track val; let last = $last) {
+                @for (
+                  val of treeSelection;
+                  track val;
+                  let last = $last;
+                  let i = $index
+                ) {
                   <cps-chip
                     role="listitem"
                     closeButtonAriaLabel="Remove"
+                    [attr.data-testid]="'cps-treeautocomplete-chip-' + i"
                     [disabled]="disabled"
                     [closable]="closableChips"
                     (closed)="remove(val)"
@@ -107,7 +147,8 @@
                 }
                 <span
                   role="listitem"
-                  class="cps-treeautocomplete-input-listitem">
+                  class="cps-treeautocomplete-input-listitem"
+                  data-testid="cps-treeautocomplete-input-listitem">
                   <ng-container
                     *ngTemplateOutlet="
                       treeAutocompleteInputTemplate;
@@ -123,14 +164,17 @@
           <ng-container *ngTemplateOutlet="treeAutocompleteInputTemplate">
           </ng-container>
         }
-        <span class="cps-treeautocomplete-box-icons">
+        <span
+          class="cps-treeautocomplete-box-icons"
+          data-testid="cps-treeautocomplete-box-icons">
           @if (clearable && !disabled) {
             <span
               role="button"
+              data-testid="cps-treeautocomplete-clear-icon"
               aria-label="Clear selection"
               [tabindex]="disabled ? -1 : 0"
               (click)="clear($event)"
-              (mousedown)="$event.preventDefault()"
+              (mousedown)="$event.preventDefault(); $event.stopPropagation()"
               (keydown.enter)="clear($event)"
               (keydown.space)="$event.preventDefault(); clear($event)"
               [style.visibility]="
@@ -148,6 +192,7 @@
           @if (showChevron) {
             <span
               class="cps-treeautocomplete-box-chevron"
+              data-testid="cps-treeautocomplete-chevron"
               role="button"
               [attr.aria-label]="
                 isOpened ? 'Collapse options' : 'Expand options'
@@ -176,6 +221,7 @@
       <div
         [id]="optionsTreeId"
         class="cps-treeautocomplete-options"
+        data-testid="cps-treeautocomplete-options"
         [class.arrow-navigating]="isArrowNavigating"
         [style.width.px]="boxWidthPx"
         (keydown)="onOptionsKeyDown($event)">
@@ -198,24 +244,45 @@
           [metaKeySelection]="multiple ? false : true"
           [selectionMode]="multiple ? 'multiple' : 'single'">
           <ng-template let-node pTemplate="directory">
-            <span class="cps-treeautocomplete-directory-elem">{{
-              node.label
-            }}</span>
+            <span
+              class="cps-treeautocomplete-directory-elem"
+              [attr.data-testid]="
+                'cps-treeautocomplete-directory-elem-' + node.key
+              "
+              >{{ node.label }}</span
+            >
           </ng-template>
           <ng-template let-node pTemplate="default">
-            <span class="cps-treeautocomplete-option">
-              <span class="cps-treeautocomplete-option-left">
+            <span
+              class="cps-treeautocomplete-option"
+              [attr.data-testid]="'cps-treeautocomplete-option-' + node.key">
+              <span
+                class="cps-treeautocomplete-option-left"
+                [attr.data-testid]="
+                  'cps-treeautocomplete-option-left-' + node.key
+                ">
                 @if (multiple) {
-                  <span class="cps-treeautocomplete-option-check"> </span>
+                  <span
+                    class="cps-treeautocomplete-option-check"
+                    [attr.data-testid]="
+                      'cps-treeautocomplete-option-check-' + node.key
+                    ">
+                  </span>
                 }
                 <span
                   class="cps-treeautocomplete-option-label"
+                  [attr.data-testid]="
+                    'cps-treeautocomplete-option-label-' + node.key
+                  "
                   [class.virtual-row]="virtualScroll"
                   >{{ node.label }}</span
                 >
               </span>
               <span
                 class="cps-treeautocomplete-option-info"
+                [attr.data-testid]="
+                  'cps-treeautocomplete-option-info-' + node.key
+                "
                 [class.virtual-row]="virtualScroll"
                 >{{ node.info }}</span
               >
@@ -230,12 +297,16 @@
         radius="0.25rem"
         opacity="0.3"
         class="cps-treeautocomplete-progress-bar"
+        data-testid="cps-treeautocomplete-loading-bar"
         bgColor="transparent">
       </cps-progress-linear>
     }
   </div>
   @if (!error && !hideDetails) {
-    <div [id]="hintId" class="cps-treeautocomplete-hint">
+    <div
+      [id]="hintId"
+      class="cps-treeautocomplete-hint"
+      data-testid="cps-treeautocomplete-hint">
       {{ hint }}
     </div>
   }
@@ -243,6 +314,7 @@
     <div
       [id]="errorId"
       class="cps-treeautocomplete-error"
+      data-testid="cps-treeautocomplete-error"
       aria-live="polite"
       aria-atomic="true">
       {{ error }}
@@ -257,6 +329,7 @@
   <input
     #treeAutocompleteInput
     class="cps-treeautocomplete-box-input"
+    data-testid="cps-treeautocomplete-input"
     spellcheck="false"
     role="combobox"
     [disabled]="disabled"
diff --git a/projects/cps-ui-kit/src/lib/components/cps-tree-autocomplete/cps-tree-autocomplete.component.ts b/projects/cps-ui-kit/src/lib/components/cps-tree-autocomplete/cps-tree-autocomplete.component.ts
index 5fbc5e343..73b1e1c90 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-tree-autocomplete/cps-tree-autocomplete.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-tree-autocomplete/cps-tree-autocomplete.component.ts
@@ -14,7 +14,7 @@ import { CpsProgressLinearComponent } from '../cps-progress-linear/cps-progress-
 import { CpsInfoCircleComponent } from '../cps-info-circle/cps-info-circle.component';
 import { isEqual } from 'lodash-es';
 import { TreeModule } from 'primeng/tree';
-import { TreeNode } from 'primeng/api';
+import type { TreeNode } from 'primeng/api';
 import {
   CpsMenuComponent,
   CpsMenuHideReason
diff --git a/projects/cps-ui-kit/src/lib/components/internal/cps-base-tree-dropdown/cps-base-tree-dropdown.component.ts b/projects/cps-ui-kit/src/lib/components/internal/cps-base-tree-dropdown/cps-base-tree-dropdown.component.ts
index a562f1994..62102ad33 100644
--- a/projects/cps-ui-kit/src/lib/components/internal/cps-base-tree-dropdown/cps-base-tree-dropdown.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/internal/cps-base-tree-dropdown/cps-base-tree-dropdown.component.ts
@@ -18,17 +18,17 @@ import {
 } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { ControlValueAccessor, NgControl, Validators } from '@angular/forms';
-import { TreeNode } from 'primeng/api';
+import type { TreeNode } from 'primeng/api';
 import {
   generateUniqueId,
   logMissingAriaLabelError
 } from '../../../utils/internal/accessibility-utils/accessibility-utils';
 import { Subscription } from 'rxjs';
-import { Tree } from 'primeng/tree';
+import type { Tree } from 'primeng/tree';
 import { isEqual } from 'lodash-es';
-import { IconType, iconSizeType } from '../../cps-icon/cps-icon.component';
+import type { IconType, iconSizeType } from '../../cps-icon/cps-icon.component';
 import { convertSize } from '../../../utils/internal/size-utils/size-utils';
-import { CpsTooltipPosition } from '../../../directives/cps-tooltip/cps-tooltip.directive';
+import type { CpsTooltipPosition } from '../../../directives/cps-tooltip/cps-tooltip.directive';
 import { CpsMenuComponent } from '../../cps-menu/cps-menu.component';
 import { CPS_ROOT_FONT_SIZE_SERVICE } from '../../../services/cps-root-font-size/cps-root-font-size.service';
 
@@ -408,12 +408,16 @@ export class CpsBaseTreeDropdownComponent
     this.optionsMap?.forEach((value) => {
       if (value.children) value.expanded = true;
     });
+    this._treeRefreshKey++;
+    this.treeList?.cd?.markForCheck();
   }
 
   collapseAll() {
     this.optionsMap?.forEach((value) => {
       if (value.children) value.expanded = false;
     });
+    this._treeRefreshKey++;
+    this.treeList?.cd?.markForCheck();
   }
 
   // eslint-disable-next-line @typescript-eslint/no-empty-function