Skip to content

Commit

Permalink
fix(searchable-select): fix error when attempting to move focus to ta…
Browse files Browse the repository at this point in the history 
…g counter (VIV-2176) (#1931)

* Fix typo

* Fix error when moving focus to elided tag counter

---------

Co-authored-by: James Taylor <146064280+TaylorJ76@users.noreply.github.com>
  • Loading branch information
@RichardHelm @TaylorJ76
RichardHelm and TaylorJ76 authored Oct 3, 2024
1 parent 8ebe118 commit 47b4580
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 32 deletions.
48 changes: 31 additions & 17 deletions libs/components/src/lib/searchable-select/searchable-select.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ describe('vwc-searchable-select', () => {
`vwc-option-tag[label="${label}"]`
) as OptionTag;

const getEllidedOptionsCounterTag = () =>
const getElidedOptionsCounterTag = () =>
element.shadowRoot!.querySelector(
`vwc-option-tag:not([removable])`
) as OptionTag;
Expand Down Expand Up @@ -103,6 +103,12 @@ describe('vwc-searchable-select', () => {
`);
});

const originalGetBoundingClientRect =
HTMLElement.prototype.getBoundingClientRect;
afterEach(() => {
HTMLElement.prototype.getBoundingClientRect = originalGetBoundingClientRect;
});

describe('basic', () => {
it('should be initialized as a vwc-searchable-select', async () => {
expect(searchableSelectDefinition()).toBeInstanceOf(
Expand Down Expand Up @@ -141,13 +147,13 @@ describe('vwc-searchable-select', () => {
expect(getTag('Apple').disabled).toBe(true);
});

it('should disable ellided options counter', async function () {
it('should disable elided options counter', async function () {
element.externalTags = true;
element.multiple = true;
element.values = ['apple'];
await elementUpdated(element);

expect(getEllidedOptionsCounterTag().disabled).toBe(true);
expect(getElidedOptionsCounterTag().disabled).toBe(true);
});

it('should disable the clear button', async function () {
Expand Down Expand Up @@ -801,33 +807,41 @@ describe('vwc-searchable-select', () => {

expect(element.shadowRoot!.activeElement).toBe(input);
});

it('should ignore elided option tags when pressing ArrowLeft', async () => {
HTMLElement.prototype.getBoundingClientRect = jest.fn(
() =>
({
width: 100,
} as DOMRect)
);
element.maxLines = 1;
element.values = ['apple', 'banana'];
focusInput();
await elementUpdated(element);
getTag('Banana').focus();

pressKey('ArrowLeft');

expect(element.shadowRoot!.activeElement).toBe(getTag('Banana'));
});
});
});

describe('externalTags', () => {
it('should display only the ellided options counter if set', async () => {
it('should display only the elided options counter if set', async () => {
element.multiple = true;
element.externalTags = true;
element.values = ['apple', 'banana'];
await elementUpdated(element);

expect(getTag('Apple')).toBeNull();
expect(getTag('Banana')).toBeNull();
expect(getEllidedOptionsCounterTag().label).toBe('2');
expect(getElidedOptionsCounterTag().label).toBe('2');
});
});

describe('tag layout', () => {
let originalGetBoundingClientRect: any;
beforeEach(() => {
originalGetBoundingClientRect =
HTMLElement.prototype.getBoundingClientRect;
});
afterEach(() => {
HTMLElement.prototype.getBoundingClientRect =
originalGetBoundingClientRect;
});

let resizeObserverCallback;
let resizeObserverDisconnected = false;
let currentWrapperWidth: any;
Expand Down Expand Up @@ -1484,7 +1498,7 @@ describe('vwc-searchable-select', () => {
expect(event.defaultPrevented).toBe(true);
});

it('should prevent default of mousedown on ellided tag counter', async () => {
it('should prevent default of mousedown on elided tag counter', async () => {
element.multiple = true;
element.externalTags = true;
element.values = ['apple'];
Expand All @@ -1494,7 +1508,7 @@ describe('vwc-searchable-select', () => {
bubbles: true,
cancelable: true,
});
getEllidedOptionsCounterTag().dispatchEvent(event);
getElidedOptionsCounterTag().dispatchEvent(event);

expect(event.defaultPrevented).toBe(true);
});
Expand Down
16 changes: 8 additions & 8 deletions libs/components/src/lib/searchable-select/searchable-select.template.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ const tagTemplateFactory = (
`;
};

const ellidedTagTemplateFactory = (
const elidedTagTemplateFactory = (
context: ElementDefinitionContext,
getComponent: (x: any, c: any) => SearchableSelect
) => {
Expand All @@ -76,7 +76,7 @@ const ellidedTagTemplateFactory = (
<${optionTagTag}
class="tag"
tabindex="-1"
:label="${(x, c) => getComponent(x, c)._numEllidedTags.toString()}"
:label="${(x, c) => getComponent(x, c)._numElidedTags.toString()}"
:shape="${(x, c) => getComponent(x, c).shape}"
?disabled="${(x, c) => getComponent(x, c).disabled}"
@mousedown="${() => false}">
Expand All @@ -93,8 +93,8 @@ function renderFieldset(context: ElementDefinitionContext) {
context,
(c) => c.parentContext.parent
);
const ellidedTagTemplate = ellidedTagTemplateFactory(context, (x, _) => x);
const nestedEllidedTagTemplate = ellidedTagTemplateFactory(
const elidedTagTemplate = elidedTagTemplateFactory(context, (x, _) => x);
const nestedElidedTagTemplate = elidedTagTemplateFactory(
context,
(_, c) => c.parent
);
Expand All @@ -112,8 +112,8 @@ function renderFieldset(context: ElementDefinitionContext) {
html<string[]>`
<div class="tag-row">
${when(
(_, c) => c.isFirst && c.parent._numEllidedTags,
nestedEllidedTagTemplate
(_, c) => c.isFirst && c.parent._numElidedTags,
nestedElidedTagTemplate
)}
${repeat((x) => x, nestedTagTemplate)}
</div>
Expand All @@ -128,8 +128,8 @@ function renderFieldset(context: ElementDefinitionContext) {
])}"
>
${when(
(x) => x._tagRows.length === 0 && x._numEllidedTags,
ellidedTagTemplate
(x) => x._tagRows.length === 0 && x._numElidedTags,
elidedTagTemplate
)}
${repeat((x) => x._lastTagRow, tagTemplate)}
<input
Expand Down
14 changes: 7 additions & 7 deletions libs/components/src/lib/searchable-select/searchable-select.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -688,7 +688,7 @@ export class SearchableSelect extends FormAssociatedSearchableSelect {
* The number of tags that are not visible due to space constraints.
* @internal
*/
@observable _numEllidedTags = 0;
@observable _numElidedTags = 0;

/**
* The visible option tags laid out in rows.
Expand All @@ -704,15 +704,15 @@ export class SearchableSelect extends FormAssociatedSearchableSelect {
#updateTagLayout() {
if (!this.multiple) {
// Single select does not display tags
this._numEllidedTags = 0;
this._numElidedTags = 0;
this._tagRows = [];
this._lastTagRow = [];
return;
}

if (this.externalTags) {
// Elide all tags
this._numEllidedTags = this.values.length;
this._numElidedTags = this.values.length;
this._tagRows = [];
this._lastTagRow = [];
return;
Expand Down Expand Up @@ -777,7 +777,7 @@ export class SearchableSelect extends FormAssociatedSearchableSelect {
currentRowWidth += TagGapPx + tagWidth;
}

this._numEllidedTags = i + 1;
this._numElidedTags = i + 1;

// Bring rows into the correct order
rows.reverse();
Expand All @@ -789,10 +789,10 @@ export class SearchableSelect extends FormAssociatedSearchableSelect {
(rows[i].length - 1) * TagGapPx;

// Add tag counter if needed
if (i === 0 && this._numEllidedTags) {
if (i === 0 && this._numElidedTags) {
lineWidth +=
TagGapPx +
this.#measureTagWidth(this._numEllidedTags.toString(), false, false);
this.#measureTagWidth(this._numElidedTags.toString(), false, false);
}

// Pull up tags from the next line as long as they fit
Expand Down Expand Up @@ -855,7 +855,7 @@ export class SearchableSelect extends FormAssociatedSearchableSelect {
} else {
(
this.shadowRoot!.querySelector(`[data-index="${index}"]`) as HTMLElement
).focus();
)?.focus();
}
}

Expand Down

0 comments on commit 47b4580

Please sign in to comment.