Skip to content

Commit

Permalink
fix(core/category-filter): does not clear category preview (#1441)
Browse files Browse the repository at this point in the history
  • Loading branch information
matthiashader authored Sep 9, 2024
1 parent da1f10e commit a69f108
Show file tree
Hide file tree
Showing 5 changed files with 89 additions and 18 deletions.
5 changes: 5 additions & 0 deletions .changeset/brown-forks-repeat.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@siemens/ix': patch
---

fix(core/category-filter): does not clear category preview
9 changes: 5 additions & 4 deletions packages/core/component-doc.json
Original file line number Diff line number Diff line change
Expand Up @@ -2170,7 +2170,7 @@
"type": "{ [id: string]: { label: string; options: string[]; }; }"
}
],
"optional": false,
"optional": true,
"required": false
},
{
Expand Down Expand Up @@ -2218,7 +2218,7 @@
"type": "FilterState"
}
],
"optional": false,
"optional": true,
"required": false
},
{
Expand All @@ -2234,6 +2234,7 @@
"reflectToAttr": false,
"docs": "Allows to hide the icon inside the text input.\nDefaults to false",
"docsTags": [],
"default": "false",
"values": [
{
"type": "boolean"
Expand Down Expand Up @@ -2347,7 +2348,7 @@
"type": "string"
}
],
"optional": false,
"optional": true,
"required": false
},
{
Expand Down Expand Up @@ -2446,7 +2447,7 @@
"type": "string[]"
}
],
"optional": false,
"optional": true,
"required": false
}
],
Expand Down
8 changes: 4 additions & 4 deletions packages/core/src/components.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -369,7 +369,7 @@ export namespace Components {
/**
* Configuration object hash used to populate the dropdown menu for type-ahead and quick selection functionality. Each ID maps to an object with a label and an array of options to select from.
*/
"categories": {
"categories"?: {
[id: string]: {
label: string;
options: string[];
Expand All @@ -382,7 +382,7 @@ export namespace Components {
/**
* A set of search criteria to populate the component with.
*/
"filterState": FilterState;
"filterState"?: FilterState;
/**
* Allows to hide the icon inside the text input. Defaults to false
*/
Expand All @@ -408,7 +408,7 @@ export namespace Components {
/**
* Placeholder text to be displayed in an empty input field.
*/
"placeholder": string;
"placeholder"?: string;
/**
* If true the filter will be in readonly mode
*/
Expand All @@ -425,7 +425,7 @@ export namespace Components {
/**
* A list of strings that will be supplied as type-ahead suggestions not tied to any categories.
*/
"suggestions": string[];
"suggestions"?: string[];
"tmpDisableScrollIntoView": boolean;
}
interface IxChip {
Expand Down
24 changes: 14 additions & 10 deletions packages/core/src/components/category-filter/category-filter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,9 @@ export class CategoryFilter {
@State() showDropdown: boolean;
@State() private textInput?: HTMLInputElement;
private formElement?: HTMLFormElement;
private isScrollStateDirty: boolean;
private isScrollStateDirty?: boolean;

@Element() hostElement: HTMLIxCategoryFilterElement;
@Element() hostElement!: HTMLIxCategoryFilterElement;

@State() hasFocus: boolean;
@State() categoryLogicalOperator = LogicalFilterOperator.EQUAL;
Expand All @@ -61,18 +61,18 @@ export class CategoryFilter {
/**
* A set of search criteria to populate the component with.
*/
@Prop() filterState: FilterState;
@Prop() filterState?: FilterState;

/**
* Placeholder text to be displayed in an empty input field.
*/
@Prop() placeholder: string;
@Prop() placeholder?: string;

/**
* Configuration object hash used to populate the dropdown menu for type-ahead and quick selection functionality.
* Each ID maps to an object with a label and an array of options to select from.
*/
@Prop() categories: {
@Prop() categories?: {
[id: string]: {
label: string;
options: string[];
Expand All @@ -93,7 +93,7 @@ export class CategoryFilter {
/**
* A list of strings that will be supplied as type-ahead suggestions not tied to any categories.
*/
@Prop() suggestions: string[];
@Prop() suggestions?: string[];

/**
* The icon next to the actual text input
Expand All @@ -105,7 +105,7 @@ export class CategoryFilter {
* Allows to hide the icon inside the text input.
* Defaults to false
*/
@Prop() hideIcon: boolean;
@Prop() hideIcon: boolean = false;

/**
* If set categories will always be filtered via the respective logical operator.
Expand Down Expand Up @@ -141,17 +141,17 @@ export class CategoryFilter {
/**
* Event dispatched whenever a category gets selected in the dropdown
*/
@Event() categoryChanged: EventEmitter<string>;
@Event() categoryChanged!: EventEmitter<string>;

/**
* Event dispatched whenever the text input changes.
*/
@Event() inputChanged: EventEmitter<InputState>;
@Event() inputChanged!: EventEmitter<InputState>;

/**
* Event dispatched whenever the filter state changes.
*/
@Event() filterChanged: EventEmitter<FilterState>;
@Event() filterChanged!: EventEmitter<FilterState>;

get dropdown() {
return this.hostElement.shadowRoot.querySelector('ix-dropdown');
Expand Down Expand Up @@ -417,6 +417,10 @@ export class CategoryFilter {
e.stopPropagation();
this.closeDropdown();
this.filterTokens = [];
if (this.category) {
this.category = undefined;
this.categoryChanged.emit(this.category);
}
this.emitFilterEvent();
}

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
/*
* SPDX-FileCopyrightText: 2024 Siemens AG
*
* SPDX-License-Identifier: MIT
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import { test } from '@utils/test';
import { expect } from '@playwright/test';

test('renders', async ({ mount, page }) => {
await mount(`<ix-category-filter></ix-category-filter>`);
const categoryFilter = page.locator('ix-category-filter');
await expect(categoryFilter).toHaveClass(/hydrated/);
});

test.describe('category-preview test', () => {
test.beforeEach(async ({ mount, page }) => {
await mount(
`
<ix-category-filter></ix-category-filter>
`
);

const categoryFilter = page.locator('ix-category-filter');
await categoryFilter.evaluate((el: HTMLIxCategoryFilterElement) => {
el.categories = {
ID_1: {
label: 'Vendor',
options: ['Apple', 'MS', 'Siemens'],
},
ID_2: {
label: 'Product',
options: ['iPhone X', 'Windows', 'APS'],
},
};
});
});

test('clear category-preview', async ({ page }) => {
await page.waitForSelector('ix-category-filter');
await page.locator('input').first().click();
await page.locator('.category-item').first().click();

const categoryPreviewPromise = page.evaluate(() => {
return new Promise((resolve) => {
function onCategoryChanged(event) {
resolve(event.detail);
}

document.addEventListener('categoryChanged', onCategoryChanged);
});
});

await page.locator('ix-icon-button').first().click();
const categoryPreview = await categoryPreviewPromise;

expect(categoryPreview).toEqual(null);
});
});

0 comments on commit a69f108

Please sign in to comment.