Skip to content

Commit

Permalink
fix(core/select): allow enter selection (#1456)
Browse files Browse the repository at this point in the history 
Co-authored-by: AndreasBerliner <[email protected]>
  • Loading branch information
@matthiashader @AndreasBerliner
matthiashader and AndreasBerliner committed Sep 13, 2024
1 parent c23c9ce commit dba2c85
Show file tree
Hide file tree
Showing 2 changed files with 78 additions and 27 deletions.
48 changes: 21 additions & 27 deletions packages/core/src/components/select/select.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -330,13 +330,12 @@ export class Select {

this.selectedLabels = this.selectedItems.map((item) => item.label);

if (this.isSingleMode && this.selectedLabels?.length) {
if (this.selectedLabels?.length && this.isSingleMode) {
this.inputValue = this.selectedLabels[0];
this.inputRef && (this.inputRef.value = this.inputValue);
return;
} else {
this.inputValue = '';
}

this.inputValue = null;
this.inputRef && (this.inputRef.value = this.inputValue);
}

private emitValueChange(value: string | string[]) {
Expand Down Expand Up @@ -414,39 +413,35 @@ export class Select {
}

if (event.code === 'Enter' || event.code === 'NumpadEnter') {
await this.onEnterNavigation();
await this.onEnterNavigation(event.target as HTMLIxSelectItemElement);
}

if (event.code === 'Escape') {
this.dropdownShow = false;
}
}

private async onEnterNavigation() {
private async onEnterNavigation(
el: HTMLIxSelectItemElement | HTMLInputElement
) {
if (this.isMultipleMode) {
return;
}

let item: HTMLIxSelectItemElement;

if (this.editable && !this.itemExists(this.inputFilterText)) {
const defaultPrevented = this.emitAddItem(this.inputFilterText);
if (defaultPrevented) {
return;
if (
!this.itemExists(this.inputFilterText.trim()) &&
!this.itemExists((el as HTMLIxSelectItemElement)?.label)
) {
if (this.editable) {
const defaultPrevented = this.emitAddItem(this.inputFilterText.trim());
if (defaultPrevented) {
return;
}
}

item = this.items[this.items.length - 1];
}

if (item) {
item.onItemClick();
}

await this.dropdownRef?.updatePosition();

if (this.isSingleMode && !this.editable) {
this.dropdownShow = false;
}
this.dropdownShow = false;
this.updateSelection();
}

private async onArrowNavigation(
Expand Down Expand Up @@ -770,9 +765,8 @@ export class Select {
label={this.inputFilterText}
onItemClick={(e) => {
e.preventDefault();
if (this.emitAddItem(this.inputFilterText)) {
e.stopPropagation();
}
e.stopPropagation();
this.emitAddItem(this.inputFilterText);
}}
onFocus={() => (this.navigationItem = this.addItemRef)}
ref={(ref) => {
Expand Down
57 changes: 57 additions & 0 deletions packages/core/src/components/select/test/select.ct.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -264,6 +264,55 @@ test('type in a novel item name in editable mode, click outside and reopen the s
await expect(page.getByRole('button', { name: 'Item 3' })).toBeVisible();
});

test('type in a novel item name and click outside', async ({ mount, page }) => {
await mount(`
<ix-select value="2">
<ix-select-item value="1" label="Item 1">Test</ix-select-item>
<ix-select-item value="2" label="Item 2">Test</ix-select-item>
<ix-select-item value="3" label="Item 3">Test</ix-select-item>
</ix-select>
<ix-button>outside</ix-button>
`);

const selectElement = page.locator('ix-select');
await expect(selectElement).toHaveClass(/hydrated/);

await page.locator('[data-select-dropdown]').click();
await page.getByTestId('input').fill('test');

await page.keyboard.press('Enter');
const inputValue = await page.getByTestId('input').inputValue();

expect(inputValue).toBe('Item 2');
});

test('type in a novel item name in multiple mode, click outside', async ({
mount,
page,
}) => {
await mount(`
<ix-select value="2" mode="multiple">
<ix-select-item value="1" label="Item 1">Test</ix-select-item>
<ix-select-item value="2" label="Item 2">Test</ix-select-item>
<ix-select-item value="3" label="Item 3">Test</ix-select-item>
</ix-select>
<ix-button>outside</ix-button>
`);

const selectElement = page.locator('ix-select');
const btnElement = page.locator('ix-button');
await expect(selectElement).toHaveClass(/hydrated/);
await expect(btnElement).toBeVisible();

await page.locator('[data-select-dropdown]').click();
await page.getByTestId('input').fill('test');

await btnElement.click();
const inputValue = await page.getByTestId('input').inputValue();

expect(inputValue).toBe('');
});

test('pass object as value and check if it is selectable', async ({
mount,
page,
Expand Down Expand Up @@ -343,6 +392,7 @@ test.describe('arrow key navigation', () => {
await input.focus();
await input.fill('I');
await page.keyboard.down('Enter');
await page.locator('ix-icon-button').click();
await page.waitForSelector('.checkmark');

await page.keyboard.down('ArrowDown');
Expand All @@ -362,6 +412,7 @@ test.describe('arrow key navigation', () => {
await input.focus();
await input.fill('I');
await page.keyboard.down('Enter');
await page.locator('ix-icon-button').click();
await page.waitForSelector('.checkmark');

await page.keyboard.down('ArrowDown');
Expand Down Expand Up @@ -410,6 +461,7 @@ test.describe('arrow key navigation', () => {
await input.focus();
await input.fill('Item 2');
await page.keyboard.down('Enter');
await page.locator('ix-icon-button').click();
await page.waitForSelector('.checkmark');

await input.clear();
Expand Down Expand Up @@ -491,6 +543,7 @@ test.describe('arrow key navigation', () => {
await input.focus();
await input.fill('Item 1');
await page.keyboard.press('Enter');
await page.locator('ix-icon-button').click();
await page.waitForSelector('.checkmark');

await input.clear();
Expand Down Expand Up @@ -525,6 +578,7 @@ test.describe('arrow key navigation', () => {
await input.focus();
await input.fill('I');
await page.keyboard.down('Enter');
await page.locator('ix-icon-button').click();
await page.waitForSelector('.checkmark');

await page.keyboard.down('ArrowDown');
Expand Down Expand Up @@ -578,6 +632,7 @@ test.describe('arrow key navigation', () => {
await input.focus();
await input.fill('Item 1');
await page.keyboard.press('Enter');
await page.locator('ix-icon-button').click();
await page.waitForSelector('.checkmark');

await input.clear();
Expand Down Expand Up @@ -610,6 +665,7 @@ test.describe('arrow key navigation', () => {
await input.focus();
await input.fill('Item 2');
await page.keyboard.press('Enter');
await page.locator('ix-icon-button').click();
await page.locator('input').clear();

await page.keyboard.down('ArrowDown');
Expand Down Expand Up @@ -651,6 +707,7 @@ test.describe('arrow key navigation', () => {
await input.focus();
await input.fill('Item 1');
await page.keyboard.press('Enter');
await page.locator('ix-icon-button').click();
await page.waitForSelector('.checkmark');

await input.clear();
Expand Down

0 comments on commit dba2c85

Please sign in to comment.